Jump to content

Search the Community

Showing results for tags 'overlap'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 6 results

  1. Hi, I'm pretty new to coding and just learning as I go. I installed a new theme to a Tumblr account I just made. Here: http://motomucci.tumblr.com/ When I upload multiple images at once as a photoset they're overlapping eachother, like this: I've found that if I toggle the "Show Intro" slider to the On position (which shows a status bar while the page loads) the photos will display correctly. However, I don't want to use the intro. I've spent all day Google searching possible fixes and haven't had anything work yet. There seems to be a lot of talk about making the Masonry plug in activate AFTER all images have loaded. But I don't know much about this. Any help would be very much appreciated! Thanks - Dave Site code: <!DOCTYPE html><html lang="en"><head> <!-- Theme Name: LEEN THEME 7 If you have any questions, please send me an email: leentheme@hotmail.com with the name of the theme and a link to your blog. Please note: support is not available for HTML & CSS customizations. Feel free to edit and customize this theme for personal use. more themes ? ===> https://www.tumblr.com/themes/by/leentheme http://www.leenthemes.com/ OOOO OOOOOOOO OOOOOOOO OOOOOOOO OOOOO OOOO OOO OOO OOOOOOOOO OOOOO OOOO OOOOOOOO OOOOOOOO OOOOO OOOO OOOOO OOOO OOOOOOO OOOOOOO OOOOO OOOOOOOOO OOOO OOO OOO OOOOO OOOOOOOO OOOOOOOOOO OOOOOOOO OOOOOOOO OOOOO OOOOOOO OOOOOOOOOOO OOOOOOOOO OOOOOOOOO OOOOO OOOOOO Version: 5.0 (January 28, 2015) By: Mesut Barazani --> <title>{Title}{block:TagPage} • Posts Tagged ‘{Tag}’{/block:TagPage}{block:PostSummary} • {PostSummary}{/block:PostSummary}</title> <link rel="shortcut icon" href="{Favicon}"/> <link rel="apple-touch-icon" href="{PortraitURL-128}"/> <link rel="alternate" type="application/rss+xml" href="{RSS}"/> {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description} <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/zdvilra/LPvni0x0f/normalize.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <link rel="stylesheet" href="http://static.tumblr.com/cc2l8yc/gqTnirh7i/magnific.css"> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <script src="http://static.tumblr.com/cc2l8yc/ko1nirgzy/velocity.min.js"></script> <script src="http://static.tumblr.com/cc2l8yc/KhRnirh0k/velocity.ui.js"></script> {block:Hidden} <meta name="if:Show People I follow" content="0"/> <meta name="if:Date Format TimeAgo" content="1"/> <meta name="select:Layout type" content="two-column" title="two column"/> <meta name="select:Layout type" content="one-column" title="one column"/> <meta name="select:Layout type" content="three-column" title="three column"/> <meta name="image:Background image" content=""/> <meta name="if:Repeat Backgruond" content="1"/> <meta name="if:Hide Caption" content="1"/> <meta name="if:Hide Caption" content="1"/> <meta name="color:Background" content="#000"/> <meta name="color:Zoom Icon Color" content="#529ecc"/> <meta name="color:Menu Icon Color" content="#BDB083"/> <meta name="color:Title Color" content="#fff"/> <meta name="color:Description Color" content="#777777"/> <meta name="color:SideBar Background Color" content="#000"/> <meta name="select:SideBar Background Opacity" content="0.6" title="Default"/> <meta name="select:SideBar Background Opacity" content="0.3" title="25%"/> <meta name="select:SideBar Background Opacity" content="1" title="100%"/> <meta name="color:Loading Line Color" content="#ea504e"/> <meta name="color:Twitter Links" content="#b5af47"/> <meta name="color:Twitter Text" content="#666666"/> <meta name="color:Loading Background Color" content="#252328"/> <meta name="text:Loading Line Height" content="1px"/> <meta name="text:Title Size" content="40px"/> <meta name="text:Twitter Limit" content="5"/> <meta name="text:Flickr ID" content=""/> <meta name="text:Flickr Limit" content="6"/> <meta name="text:Instagram photo count" content="6" /> <meta name="text:Instagram userId" content="" /> <meta name="text:Instagram access token" content="" /> <meta name="color:Search Border" content="#cccccc"/> <meta name="color:Search Border On Focus" content="#f7c282"/> <meta name="color:Link Header" content="#54A7AE"/> <meta name="select:Body font" content="Montserrat" title="Montserrat"> <meta name="select:Body font" content="Roboto" title="Roboto"> <meta name="select:Body font" content="Source Sans Pro" title="Source Sans Pro"> <meta name="select:Body font" content="Droid Serif" title="Droid Serif"> <meta name="select:Body font" content="Lato" title="Lato"> <meta name="select:Body font" content="Merriweather" title="Merriweather"> <meta name="select:Body font" content="PT Sans" title="PT Sans"> <meta name="select:Body font" content="Roboto Slab" title="Roboto Slab"> <meta name="select:Body font" content="Raleway" title="Raleway"> <meta name="select:Body font" content="Vollkorn" title="Volkorn"> <meta name="select:Body font" content="Varela" title="Varela"> <meta name="select:Body font" content="Varela Round" title="Varela Round"> <meta name="select:Body font" content="Open Sans" title="Open Sans"> <meta name="select:Body font" content="Arial" title="Arial"> <meta name="select:Body font" content="Georgia" title="Georgia"> <meta name="select:Body font" content="Cabin" title="Cabin"> <meta name="select:Title font" content="Yanone Kaffeesatz" title="Yanone Kaffeesatz"> <meta name="select:Title font" content="Roboto" title="Roboto"> <meta name="select:Title font" content="Source Sans Pro" title="Source Sans Pro"> <meta name="select:Title font" content="Droid Serif" title="Droid Serif"> <meta name="select:Title font" content="Lato" title="Lato"> <meta name="select:Title font" content="Merriweather" title="Merriweather"> <meta name="select:Title font" content="PT Sans" title="PT Sans"> <meta name="select:Title font" content="Roboto Slab" title="Roboto Slab"> <meta name="select:Title font" content="Raleway" title="Raleway"> <meta name="select:Title font" content="Vollkorn" title="Volkorn"> <meta name="select:Title font" content="Varela" title="Varela"> <meta name="select:Title font" content="Varela Round" title="Varela Round"> <meta name="select:Title font" content="Open Sans" title="Open Sans"> <meta name="select:Title font" content="Arial" title="Arial"> <meta name="select:Title font" content="Georgia" title="Georgia"> <meta name="select:Title font" content="Cabin" title="Cabin"> <meta name="select:Description font" content="Roboto" title="Roboto"> <meta name="select:Description font" content="Yanone Kaffeesatz" title="Yanone"> <meta name="select:Description font" content="Source Sans Pro" title="Source Sans Pro"> <meta name="select:Description font" content="Droid Serif" title="Droid Serif"> <meta name="select:Description font" content="Lato" title="Lato"> <meta name="select:Description font" content="Merriweather" title="Merriweather"> <meta name="select:Description font" content="PT Sans" title="PT Sans"> <meta name="select:Description font" content="Roboto Slab" title="Roboto Slab"> <meta name="select:Description font" content="Raleway" title="Raleway"> <meta name="select:Description font" content="Vollkorn" title="Volkorn"> <meta name="select:Description font" content="Varela" title="Varela"> <meta name="select:Description font" content="Varela Round" title="Varela Round"> <meta name="select:Description font" content="Open Sans" title="Open Sans"> <meta name="select:Description font" content="Arial" title="Arial"> <meta name="select:Description font" content="Georgia" title="Georgia"> <meta name="select:Description font" content="Cabin" title="Cabin"> <meta name="text:Disqus Shortname" content=""/> <meta name="text:Google Analytics ID" content=""/> <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/Bf7nirtey/leen.jpg" title="Leen"/> <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/ysWnirtd5/inbit.jpg" title="Inbit"/> <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/W6Ynirtg2/barg.jpg" title="Barg"/> <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/yVHnhqmel/sea.jpg" title="sea"/> <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/g16ngxz0v/12.jpg" title="Manana"/> <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/wtgnhqmdw/riziz.jpg" title="Riziz"/> <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/92Inhqmfi/travel.jpg" title="Travel"/> <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/4hanhqmgc/telle.jpg" title="Telle"/> <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/ZwZnhqmh6/rama.jpg" title="Rama"/> <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/mtlnhqmht/rain.jpg" title="Rain"/> <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/Xdinhqmio/sea_2.jpg" title="Sea 2"/> <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/zkMngxy3r/8.jpg" title="Adam"/> <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/ML6ngxyb2/9.jpg" title="Dapple dapple"/> <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/EoSngxyms/10.jpg" title="California"/> <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/5F8ngxyp0/11.jpg" title="Screaming"/> <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/oZSngxz6h/13.jpg" title="Savara"/> <meta name="select:Backgruond" content="" title="None"/> <meta name="if:Infinite Scrolling" content="1"/> <meta name="if:Infinite Scrolling Trigger" content="1"/> <meta name="if:Show Random Post" content="1"/> <meta name="if:Show Intro" content="1"/> <meta name="if:Show Archive Page" content="1"/> <meta name="if:Show Feed Page" content="1"/> <meta name="text:WebSite URL" content=""/> <meta name="text:Facebook URL" content=""/> <meta name="text:Twitter URL" content=""/> <meta name="text:Google Plus URL" content=""/> <meta name="text:Dribbble URL" content=""/> <meta name="text:Instagram URL" content=""/> <meta name="text:Flickr URL" content=""/> <meta name="text:Youtube URL" content=""/> <meta name="text:Vimeo URL" content=""/> <meta name="text:DeviantArt URL" content=""/> <meta name="text:Pinterest URL" content=""/> <meta name="text:LinkedIn URL" content=""/> <meta name="text:Behance URL" content=""/> <meta name="text:GitHub URL" content=""/> <meta name="text:Spotify URL" content=""/> <meta name="text:SoundCloud URL" content=""/> <meta name="text:Wordpress URL" content=""/> <meta name="text:Tag 1" content=""/> <meta name="text:Tag 2" content=""/> <meta name="text:Tag 3" content=""/> <meta name="text:Tag 4" content=""/> <meta name="text:Tag 5" content=""/> <meta name="text:Tag 6" content=""/> <meta name="text:Tag 7" content=""/> <meta name="text:Tag 8" content=""/> <meta name="text:Tag 9" content=""/> <meta name="text:Tag 10" content=""/> <meta name="text:Tag 11" content=""/> <meta name="text:Tag 12" content=""/> <meta name="text:Tag 13" content=""/> <meta name="text:Tag 14" content=""/> <meta name="text:Tag 15" content=""/> {/block:Hidden} <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/o4g7vaw/Ozonhqpnf/font-css.css"> <link href='http://fonts.googleapis.com/css?family={select:Body Font}:400,700,700italic,900,900italic,400italic,300' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family={select:Title Font}:400,700,700italic,900,900italic,400italic,300' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family={select:Description Font}:400,700,700italic,900,900italic,400italic,300' rel='stylesheet' type='text/css'> <style type="text/css"> *, *::before, *::after { box-sizing: border-box; } *:focus { outline: none; border: none; } body{ font-family: '{select:Body Font}', sans-serif; background: transparent; {block:IfShowIntro} {block:IndexPage} overflow: hidden; {/block:IndexPage} {/block:IfShowIntro} overflow-x: hidden !important; } a{ text-decoration: none; outline: none; color: {AccentColor}; } a:focus , a:visited{ outline: none; border: none; -moz-outline: none } .post iframe, embed, object, .post video ,video,.tumblr_video_container{ width: 100% !important; display: block; } #loading{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 9999; background: {color:Loading Background Color}; } #load-Span{ position: absolute; top: 0; bottom: 0; margin: auto; width: 0%; height:{text:Loading Line Height}; background: #fff; } #color{ width: 100%; height: 2px; background: {color:Loading Line Color}; } .container{ {block:IfShowIntro} opacity: 0; {/block:IfShowIntro} position: relative; padding: 0; margin: 0; {block:PermalinkPage} opacity: 1; {/block:PermalinkPage} } .bg{ position: fixed; width: 100%; height: 110%; {block:IfNotBackgroundImageImage} background: {color:Background} url('{select:Backgruond}') center center fixed; background-size: 100% 100% !important; {/block:IfNotBackgroundImageImage} {block:IfBackgroundImageImage} {block:IfNotRepeatBackgruond} background: {color:Background} url('{image:Background Image}') center center fixed; background-size: 100% 100% !important; {/block:IfNotRepeatBackgruond} {block:IfRepeatBackgruond} background: {color:Background} url({image:Background Image}) repeat fixed; {/block:IfRepeatBackgruond} {/block:IfBackgroundImageImage} {block:IfShowIntro} {block:IndexPage} opacity: 0; {/block:IndexPage} {/block:IfShowIntro} } .fl-right { float: right; } .fl-left { float: left; } .sideBar{ width: 300px; height: 100%; position: fixed; top: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; {block:IfShowIntro} {block:IndexPage} left: -100%; {/block:IndexPage} {/block:IfShowIntro} } .sideBar:before{ position: absolute; width: 100%; height: 100%; content: ''; opacity: {select:SideBar Background Opacity}; background: {color:SideBar Background Color}; } #main{ position: relative; {block:IfNotShowIntro} {block:IndexPage} opacity: 0; transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; -ms-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; {/block:IndexPage} {/block:IfNotShowIntro} } .main{ width: 75%; min-height: 800px; margin-bottom: 150px; margin-left: 320px; margin-top: 10px; padding-bottom: 100px; position: relative; {block:PermalinkPage} margin-left: 320px; margin-bottom: 400px; {/block:PermalinkPage} } .post{ width: 32%; margin-left: 8px; margin-top: 7px; border-radius: 3px; background: #fff; border: 1px solid; border-color: #e5e6e9 #dfe0e4 #d0d1d5; -webkit-border-radius: 3px; overflow: hidden; {block:PermalinkPage} width: 70%; right: 0; left: 0; margin: 50px auto; overflow: visible; {/block:PermalinkPage} } .photo-set{ background: #fff; padding: 5px; min-height: 100%; } .two-column .post{ width: 48%; {block:PermalinkPage} width: 70%; {/block:PermalinkPage} } .one-column .post{ width: 60%; margin: auto; margin-top: 10px; left: 0; right: 0; } .post-img{ display: block !important; width: 100%; } a h1.title{ padding: 0px 30px; text-align: center; margin-left: 5px; font-size: {text:Title Size}; font-weight: 300; opacity: 0.7 !important; color:{color:Title Color}; font-family: '{select:Title Font}', sans-serif; letter-spacing: 1.5px; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } .decs{ padding: 0px 20px; font-size: 14px; font-weight: bold; color: {color:Description Color}; line-height: 1.4; text-align: justify; font-family: '{select:Description Font}', sans-serif; } .square{ border-radius: 0px; } .circle{ border-radius: 50%; } .avatar-img{ margin: 15px auto; width: 128px; height: 128px; background: url({Favicon}); background-size: 100% 100%; display: block !important; transition: border-radius 0.2s ease; -webkit-transition: border-radius 0.2s ease; -moz-transition: border-radius 0.2s ease; -ms-transition: border-radius 0.2s ease; -o-transition: border-radius 0.2s ease; } .loading-content{ margin: 70px auto; display: block !important; } img{ max-width: 100%; border: none; outline: none; } /* Instagram */ #instafeed { margin:35px auto; width: 220px; } #instafeed img{ width: 110px; overflow: hidden; padding: 4px; opacity: 0.8 !important; transition: all 0.3s ease; } #instafeed p , #basicuse p , p.follow , #twitter > p{ color: {color:Menu Icon Color}; text-align: center; margin-bottom: 10px; line-height: 1.3; font-size: 14px; opacity: 0.8 !important; font-weight: bold; } #instafeed img:hover{ opacity: 1 !important; } #twitter > p > a{ color: {color:Menu Icon Color} } /* followed */ ul.followed{ list-style: none; width: 246px; text-align: center; margin: 0 auto; padding: 0; } ul.followed li{ display: inline-block; } /* zoom Icon */ .zoom-con{ position: relative; width: 100%; height: 100%; } .post:hover .zoom-lens{ opacity: 1; } .zoom-lens{ position: absolute; cursor: pointer; opacity: 0; background: transparent; top: 50%; left: 50%; height: 80px; width: 80px; transition :all 0.2s ease-out; transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); } .zoom-one{ position: absolute; cursor: pointer; left: 0; top: 0; width: 80px; height: 80px; border-radius: 48px; opacity: 0.4; background: {color:Zoom Icon Color}; transition :all 0.2s ease-out; -moz-transition :all 0.2s ease-out; -webkit-transition :all 0.2s ease-out; -o-transition :all 0.2s ease-out; -ms-transition :all 0.2s ease-out; } .zoom-lens:hover .zoom-one{ transform: scale(1.5,1.5); -moz-transform: scale(1.5,1.5); -ms-transform: scale(1.5,1.5); -o-transform: scale(1.5,1.5); -webkit-transform: scale(1.5,1.5); opacity: 0; } .zoom-icon{ position: absolute; left: 12px; top: 12px; opacity: 0.8; background-color: {color:Zoom Icon Color}; width: 56px; height: 56px; border-radius: 36px; transition :all 0.1s linear; -moz-transition :all 0.1s linear; -o-transition :all 0.1s linear; -ms-transition :all 0.1s linear; -webkit-transition :all 0.1s linear; } .zoom-lens:hover .zoom-icon{ transform: scale(0.95,0.95); -moz-transform: scale(0.95,0.95); -ms-transform: scale(0.95,0.95); -o-transform: scale(0.95,0.95); -webkit-transform: scale(0.95,0.95); opacity: 0.7; } .preloader{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); } /*twitter */ #twitter{ margin: 30px auto; padding: 10px; text-align: center; } #tweets p{ padding: 0px 20px; font-size: 14px; font-weight: bold; color: {color:Twitter Text}; line-height: 1.4; } #tweets a{ color: {color:Twitter Links}; display: block; padding-left: 6px; line-height: 1.5; font-size: 12px; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } #tweets a:hover{ opacity: 0.5; } #tweets a:first-of-type { margin-top: 10px; } #tweets p:hover .twitterS{ color: #55acee; } .twitterS{ margin-right: 5px; font-size: 16px; ; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } /* Flickr CSS */ #basicuse{ margin: 0 auto; width: 232px; } .thumbs { margin: 0; padding: 0; overflow: hidden; } .thumbs li { list-style: none; float: left; margin: 5px; padding: 3px; background: #eee; -moz-box-shadow: 0 0 4px #444; -webkit-box-shadow: 0 0 2px #000; } .thumbs li a { } .thumbs li img { display: block; width: 100px; } .thumbs li a img { border: none;} .mCustomScrollbar{-ms-touch-action:none;touch-action:none}.mCustomScrollbar.mCS_no_scrollbar{-ms-touch-action:auto;touch-action:auto}.mCustomScrollBox{position:relative;overflow:hidden;height:100%;max-width:100%;outline:none;direction:ltr}.mCSB_container{overflow:hidden;width:auto;height:auto}.mCSB_inside > .mCSB_container{margin-right:30px}.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{margin-right:0}.mCS-dir-rtl > .mCSB_inside > .mCSB_container{margin-right:0;margin-left:5px}.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{margin-left:0}.mCSB_scrollTools{position:absolute;width:5px;height:auto;left:auto;top:0;right:0;bottom:0}.mCSB_outside + .mCSB_scrollTools{right:-26px}.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools,.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{right:auto;left:0}.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{left:-26px}.mCSB_scrollTools .mCSB_draggerContainer{position:absolute;top:0;left:0;bottom:0;right:10px;height:auto}.mCSB_scrollTools a + .mCSB_draggerContainer{margin:20px 0}.mCSB_scrollTools .mCSB_draggerRail{width:2px;height:100%;margin:0 auto;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}.mCSB_scrollTools .mCSB_dragger{cursor:pointer;width:100%;height:30px;z-index:1}.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{position:relative;width:4px;height:100%;margin:0 auto;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px;text-align:center}.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{width:12px}.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{width:8px}.mCSB_scrollTools .mCSB_buttonUp,.mCSB_scrollTools .mCSB_buttonDown{display:block;position:absolute;height:20px;width:100%;overflow:hidden;margin:0 auto;cursor:pointer}.mCSB_scrollTools .mCSB_buttonDown{bottom:0}.mCSB_scrollTools,.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCSB_scrollTools .mCSB_buttonUp,.mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonLeft,.mCSB_scrollTools .mCSB_buttonRight{-webkit-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;-moz-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;-o-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;transition:opacity .2s ease-in-out,background-color .2s ease-in-out}.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{-webkit-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;-moz-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;-o-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out}.mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical,.mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{right:0;margin:12px 0}.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{bottom:0;margin:0 12px}.mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical,.mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{left:0;right:auto}.mCS-minimal.mCSB_scrollTools .mCSB_draggerRail,.mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:transparent}.mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger,.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{height:50px}.mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger{width:50px}.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,0.2);filter:alpha(opacity=20);-ms-filter:alpha(opacity=20)}.mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,0.5);filter:alpha(opacity=50);-ms-filter:alpha(opacity=50)}.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,0.2);filter:alpha(opacity=20);-ms-filter:alpha(opacity=20)}.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,0.5);filter:alpha(opacity=50);-ms-filter:alpha(opacity=50)} /* like reblog share btn */ .p-btn{ width: 100%; height: 40px; background: #fff; border-top: 1px solid #ccc; position: relative; } .date{ position: absolute; right: 10px; top: 12px; font-size: 12px; font-weight: bold; } .date a{ color: #666; } .permalink{ height: 20px; width: 20px; position: absolute; top: 12px; left: 90px; } .permalink a{ color: #666; } .post-reblog{ height: 20px; width: 20px; position: absolute; top: 11px; left: 10px; } .post-reblog > a , .post-like > i{ display: block; font-size: 20px; font-family: 'leen-theme'; cursor: pointer; color: #666; } .icon-reblog:before { content: "e61d"; padding: 0; margin: 0; } .post-like{ height: 20px; width: 20px; position: absolute; top: 11px; left: 35px; } .post-like > i { position: relative; color: #666; z-index: 1; } .like_button { position: absolute; top: 2px; margin-top: 2px; left: 1px; opacity: 0; z-index: 999999; cursor: pointer; } .like_button.liked { opacity: 0; } .like_button.liked + i { color: red; } .icon-heart:before { content: "e603"; } .icon-heart{ cursor: pointer; } .share{ width: 18px; height: 18px; position: absolute; top: 12px; left: 65px; } .fa-upload{ cursor: pointer; color: #666; } .share input{ display: none; } .social { transform-origin:50% 0%; -webkit-transform: scale(0) translateY(10px); -moz-transform:scale(0) translateY(10px); -o-transform:scale(0) translateY(10px); transf
  2. hello everybody, I am trying to add an image on a login page but when the browsers viewport is resized the image gets overlapped. /*-------------------------Simple reset--------------------------*/ *{margin:0;padding:0;} /*-------------------------General Styles--------------------------*/ html{background:url('../img/bg_tile.jpg') #161718;}body{background:url('../img/bg_center.jpg') no-repeat center center;min-height: 600px; padding: 200px 0 0;font:14px/1.3 'Segoe UI',Arial, sans-serif;}a, a:visited {text-decoration:none;outline:none;color:#54a6de;}a:hover{text-decoration:underline;}section, footer{display: block;}#loginimg{color:white;background: url('../img/login.png') no-repeat;height: 400px;width:400px;float:left;margin-left: 315px;top: 0px;padding: 0 0 0;display: block;} /*----------------------------Styling the forms-----------------------------*/ #formContainer{width:288px;height:321px;margin:0 auto;position:relative;z-index:1; -moz-perspective: 800px;-webkit-perspective: 800px;perspective: 800px;}#formContainer form{width:100%;height:100%;position:absolute;top:0;left:0; /* Enabling 3d space for the transforms */-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;transform-style: preserve-3d; /* When the forms are flipped, they will be hidden */-moz-backface-visibility: hidden;-webkit-backface-visibility: hidden;backface-visibility: hidden; /* Enabling a smooth animated transition */-moz-transition:0.8s;-webkit-transition:0.8s;transition:0.8s; /* Configure a keyframe animation for Firefox */-moz-animation: pulse 2s infinite; /* Configure it for Chrome and Safari */-webkit-animation: pulse 2s infinite;} /* Firefox Keyframe Animation */@-moz-keyframes pulse{0%{ box-shadow:0 0 1px #008aff;}50%{ box-shadow:0 0 8px #008aff;}100%{ box-shadow:0 0 1px #008aff;}}/* Webkit keyframe animation */@-webkit-keyframes pulse{0%{ box-shadow:0 0 1px #008aff;}50%{ box-shadow:0 0 10px #008aff;}100%{ box-shadow:0 0 1px #008aff;}}#login{background:url('../img/login_form_bg.jpg') no-repeat;z-index:100;}#recover{background:url('../img/recover_form_bg.jpg') no-repeat;z-index:1;opacity:0; /* Rotating the recover password form by default */-moz-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);transform:rotateY(180deg);}#formContainer.flipped #login{ opacity:0; /** * Rotating the login form when the * flipped class is added to the container */ -moz-transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg);}#formContainer.flipped #recover{ opacity:1; /* Rotating the recover div into view */-moz-transform:rotateY(0deg);-webkit-transform:rotateY(0deg);transform:rotateY(0deg);} /*----------------------------Inputs, Buttons & Links-----------------------------*/ #login .flipLink,#recover .flipLink{ /* The blue ribbon links */ height: 65px; overflow: hidden; position: absolute; right: 0; text-indent: -9999px; top: 0; width: 65px;}#recover .flipLink{right:auto;left:0;}#login:after{/* The "Click here" tooltip */width:98px;height:16px;content:'';background:url('../img/click_here.png') no-repeat;position:absolute;right:-120px;top:22px;}input[type=text],input[type=password]{/* The text fields */font: 15px 'Segoe UI',Arial,sans-serif;border: none;background:none;height: 36px;left: 26px;position: absolute;top: 176px;width: 234px;text-indent: 8px;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);color:#eee;outline:none;}#loginPass{top: 215px;}#recoverEmail{top:215px;}input[type=submit]{ /* Submit button */ opacity:0.9;position:absolute;top:262px;left:25px;width: 239px;height:36px;cursor:pointer;border-radius:6px;box-shadow:0 1px 1px #888;border:none;color:#fff;font:14px/36px 'Segoe UI Light','Segoe UI',Arial,sans-serif; /* CSS3 Gradients */ background-image: linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);background-image: -o-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);background-image: -moz-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);background-image: -webkit-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);background-image: -ms-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.5, rgb(80,102,127)), color-stop(0.5, rgb(87,109,136)), color-stop(1, rgb(106,129,155)));}input[type=submit]:hover{opacity:1;}input::-webkit-input-placeholder { color:#eee;} /*----------------------------The Footer-----------------------------*/ footer{background-color: #111111;bottom: 0;box-shadow: 0 -1px 2px #111111;height: 45px;left: 0;position: fixed;width: 100%;z-index: 100000;}footer h2{color: #EEEEEE;font-size: 14px;font-weight: normal;left: 50%;margin-left: -400px;padding: 13px 0 0;position: absolute;width: 540px;}footer h2 i{font-style:normal;color:#888;}footer a.tzine,a.tzine:visited{color: #999999;font-size: 12px;left: 60%;margin: 16px 0 0 110px;position: absolute;text-decoration: none;top: 0;}footer a i{color:#ccc;font-style: normal;}footer a i b{color:#c92020;font-weight: normal;} <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Login</title> <!-- Our CSS stylesheet file --> <link rel="stylesheet" href="assets/css/styles.css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="loginimg"> </div> <div id="formContainer"> <form id="login" method="post" action="./"> <a href="#" id="flipToRecover" class="flipLink">Forgot?</a> <input type="text" name="loginEmail" id="loginEmail" value="Email" /> <input type="password" name="loginPass" id="loginPass" value="pass" /> <input type="submit" name="submit" value="Login" /> </form> <form id="recover" method="post" action="./"> <a href="#" id="flipToLogin" class="flipLink">Forgot?</a> <input type="text" name="recoverEmail" id="recoverEmail" value="Email" /> <input type="submit" name="submit" value="Recover" /> </form> </div> <footer> <h2>© 2012 <i>TechGeeks<i> |</h2> <a class="tzine">Design by TechGeeks Team </footer> <!-- JavaScript includes --> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="assets/js/script.js"></script> </body></html>
  3. Hello there, I have developed this piece of php/html code, for my custom Wordpress theme. <?php get_header(); ?><div class="layout clearfix"> <div id="content"> <?php if (have_posts()) : ?> <div id="loops-wrapper" class="left"> <?php while (have_posts()) : the_post(); ?> <div id="article-<?php the_id(); ?>" class="article clearfix"> <div class="post-others-wrap"> <p class="categories"><?php the_category('<br />'); ?></p> <div class="khmedia-social"> <p class='st_facebook_vcount' displayText='Facebook'></p> <p class='st_twitter_vcount' displayText='Tweet'></p> <p class='st_email_vcount' displayText='Email'></p> </div> </div> <div class="post-date-wrap"> <p class="post-date"> <span class="day"><?php the_time('d'); ?></span> <span class="month"><?php the_time('M'); ?></span> <span class="year"><?php the_time('Y'); ?></span> </p> </div> <div id="article-title-<?php the_id(); ?>" class="post-title"> <h1> <?php echo the_title(); ?> </h1> <div id="article-excerpt-<?php the_id(); ?>" class="post-content"> <?php wp_link_pages( array( 'before' => '<div class="pages">'.'पृष्ठ:', 'after' => '</div>' ) ); ?> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="pages">'.'पृष्ठ:', 'after' => '</div>' ) ); ?> </div> </div> </div> <?php endwhile; ?> <div id="pagelinks" class="clearfix"> <?php previous_post_link('<div class="prevlink">%link</div>'); ?> <?php next_post_link('<div class="nextlink">%link</div>'); ?> </div> </div> <?php endif; ?> </div> <div class="sidebar"> <?php if ( is_active_sidebar( 'primary' ) ) : dynamic_sidebar( 'primary' ); endif; ?> </div></div><?php get_footer(); ?> And now here is the CSS for it: .layout { display: block; margin-top: 3em; width: 100%;} #content { line-height: 1.5em; width: 697px; float: left; padding-right: 30px; position: relative; min-height: 300px;} .clearfix { clear: both; content: " "; display: block; line-height: 0; visibility: inherit;} #loops-wrapper { display: block;} #loops-wrapper .article { padding-left: 122px; width: 600px; margin-bottom: 50px; min-height: 150px; display: block; position: relative;} #loops-wrapper .article .post-others-wrap { left: 0; display: block; position: absolute; width: 100px; margin: 55px 0 0; text-align: right; line-height: 1.5em;} #loops-wrapper .article .post-others-wrap .khmedia-social { display: block; border-top: 2px solid #8AE234; border-bottom: 2px solid #8ae234; padding: 0 0 5px; margin-top: 20px;} #loops-wrapper .article .post-others-wrap .categories { color: black; position: relative;} Actually, the main content area is expanding with large data. But, when I insert a simple post with only the title. The div is overlapping with the footer.Here is my site link: http://www.khmedia.in Please help guys...
  4. I need some help making images fit onto my page; sometimes when I post an image, the dimensions are too big and so it creates a kind of overlapping look that I really dislike, if you look here you'll see what I mean: http://stay-sharp.tumblr.com/ It would be amazing if you could help me out, my theme is below. Thanks so much in advance xx <head> <!-- DEFAULT VARIABLES --> <meta name="color:background" content="#F7F7F7" /><meta name="color:entry" content="#FFFFFF" /><meta name="color:text" content="#3F3F3F"><meta name="color:link" content="#4B4B4B" /><meta name="color:link hover" content="#000000" /><meta name="font:body" content="georgia" /> <meta name="if:Endless Scrolling" content="0" /><meta name="if:Fade Images" content="0" /><meta name="if:Hide Captions" content="1" /> <meta name="text:Custom Link One" content="" /><meta name="text:Custom Link One Title" content="" /><meta name="text:Custom Link Two" content="" /><meta name="text:Custom Link Two Title" content="" /><meta name="text:Custom Link Three" content="" /><meta name="text:Custom Link Three Title" content="" /><meta name="text:Custom Link Four" content="" /><meta name="text:Custom Link Four Title" content="" /> <title>{Title}</title><link rel="shortcut icon" href="{Favicon}"><link rel="alternate" type="application/rss+xml" href="{RSS}">{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description} <style type="text/css">::-webkit-scrollbar-thumb:vertical {background-color:#CCC;height:100px;}::-webkit-scrollbar-thumb:horizontal {background-color:#FFF;height:10px !important;}::-webkit-scrollbar {height:10px;width:5px;background-color:#fff;} .border {margin: 2 auto 8px; margin-top:4px; width: 80%; height: 1px; background:{color:background}; background: -webkit-gradient(linear, left top, right bottom, from(#ffffff), color-stop(.5, {color:background}), to(#ffffff)); background: -moz-linear-gradient(0deg, #ffffff, {color:background}, #ffffff);} {block:IfFadeImages}img{ -webkit-transition: opacity 0.7s linear; opacity: 1;}img:hover{ -webkit-transition: opacity 0.7s linear; opacity: .80; }{/block:IfFadeImages} body{ background-color:{color:background}; color:{color:Text}; font-family:{font:body}; font-size:12px; line-height: 12px; text-align:justify;}a:link, a:active, a:visited{ color: {color:link}; text-decoration:none; -moz-transition: 0.8s ease-in; -webkit-transition: 0.8s ease-in; -o-transition: 0.8s ease-in; transition: 0.8s ease-in;}a:hover{ color:{color:link hover}; text-decoration:underline; -moz-transition: 0.8s ease-in; -webkit-transition: 0.8s ease-in; -o-transition: 0.8s ease-in; transition: 0.8s ease-in;}h1, big{ color:{color:title}; font-family:{font:title}; font-size:18px; line-height:30px; letter-spacing:-1px; font-weight:normal; text-transform:; margin:0px; padding:0px; text-align:left;}h3{ color:{color:title}; font-family:{font:title}; font-size:10px; line-height:14px; letter-spacing:1px; font-weight:normal; margin:0px; padding:0px; margin-bottom:-0px;text-align:left;} .title {color:{color:text}; font-family:elephant; font-size:20px; font-style:italic; line-height:10px; letter-spacing:1px; text-align:center; text-transform:lowercase; padding-top:15px; padding-bottom:7px; padding-right:10px; padding-left:10px;}.title a:hover{text-decoration:none;}.ptitle {color:{color:text}; font-family:times new roman; font-size:12px; font-weight:bold; font-style: italic; } #header{width:550px; background-color:{color:background}; margin:auto; position:absolute; z-index: 3;}.disphoto {background-image: url({PortraitURL-96}); -moz-border-radius: 38px; -webkit-border-radius: 60px; width: 96px; height: 96px; margin: 10px;} #center{ width:450px; background:{color:entry}; padding-right:10px; padding-left:10px; padding-top:3px; margin-top:-10px; margin-bottom:10px; margin:auto;}#entry{ width:450px; padding-bottom:5px;} .perma { text-align:right; }.perma a { font-family:times new roman; font-size:10px; font-weight:bold; font-style:italic; color:{color:text}; cursor:default; }.perma a:hover{ text-decoration:none; color:{color:link hover}; }.holder { background-color:{color:entry};} .quote {font-family:times new roman; font-size:12px; font-weight:bold; font-style:italic; padding-bottom:2px; }.source {text-align:right; padding-bottom:3px;}.audio {width: 445px; background-color:#E4E4E4; padding:3px; -webkit-box-shadow: 3px 3px 3px #dcdcdc;}div.video embed, div.post div.video object { width:320px !important; height:200px !important;}.question {background-color:#E2E2E2; padding:2px;} #textperma {background-color:{color:entry}; font-color:{color:text}; margin-left:460px; opacity:0; position:absolute; z-index:3; padding:3px; -moz-transition: 0.8s ease-in; -webkit-transition: 0.8s ease-in; -o-transition: 0.8s ease-in; transition: 0.8s ease-in;} .pagelinks a{text-transform:; font-size:9px; font-family:times new roman; text-align:right; padding-bottom:4px; padding-bottom:1px; padding-left:1px; padding-right:1px; color:{color:link};}.pagelinks a:hover {background-color:{color:link hover}; color:{color:link}; }#entry:hover #perma {display: block; opacity:1;}#entry:hover #textperma {display:block; opacity:1;}.layer1 {margin:auto; margin-top:7px; width: 550px; padding-right:10px; padding-left:10px; background-color:{color:header};}.heading { background-color:{color:header}; margin:auto; margin-top:-5px; padding-bottom:5px; text-transform:lowercase;}.content { padding-top:5px; margin:auto;}.alignleft {float: left;}.alignright {float: right;}.right { margin: 0 0 px 0; padding: px; overflow:hidden; -moz-border-radius:3px; border-radius:3px; text-align: left; text-transform:; }.totalright {float:right; margin-top:0px;}#ask{ display:block; float: left; width:50px; overflow:hidden; word-wrap:break-word; margin-right:3px;}div.video embed,div.post div.video object {width:450px !important;height:300px !important;}blockquote{ background-color: {color:box}; padding: 7px; padding-left:8px; border-left:1px solid{color:background}; border-right:1px solid {color:background};b, strong{color:{color:title};}i, em {color:{color:text};}p{margin-top:3px; margin-bottom:3px;}blockquote img{display:block; width:100%;}border-left: 2px solid #FAFAFA;padding: 0 0 0 15px;margin-left: 0px;blockquote {position:relative; left:-5px; margin-top:0px; margin-right:0px; padding-right:0px;}ul.chat, .chat ol, .chat li {list-style:none; margin:0px; padding:2px; }.notes img{width:10px; position:relative; top:1px;}ol.notes, .notes li{list-style:none; margin:0px; padding:0px;}iframe input, iframe submit, iframe textarea, iframe div, iframe table {background-color:transparent!important;}</style> {block:IfEndlessScrolling}<script type="text/javascript" src="http://static.tumblr.com/q0etgkr/J5bl3lkz1/tumblrautopagernopage.js"></script>{/block:IfEndlessScrolling} <style type="text/css">{CustomCSS]</style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script>$(document).ready(function(){$(".perma").hide();$(".holder").mouseenter(function (swing) {$(".perma", this).slideDown("slow");});$(".holder").mouseleave(function (swing) {$(".perma", this).slideUp("slow");});});</script> </head> <body> <div id="center"> <div class="title"><a href="/">{Title}</a></div> <div style="word-spacing:5px;"><Center><a href="/archive">1.</a> — <a href="/ask">2.</a> — <a href="/tagged/music">3.</a> — <a href="/tagged/me">4.</a>{block:IfCustomLinkOneTitle} — <a href="{text:Custom Link One}"> {text:Custom Link One Title}</a> {/block:ifCustomLinkOneTitle} {block:ifCustomLinkTwoTitle} —<a href="{text:Custom Link Two}"> {text:Custom Link Two Title}</a> {/block:ifCustomLinkTwoTitle} {block:ifCustomLinkThreeTitle} — <a href="{text:Custom Link Three}"> {text:Custom Link Three Title}</a> {/block:ifCustomLinkThreeTitle} {block:ifCustomLinkFourTitle} — <a href="{text:Custom Link Four}">{text:Custom Link Four Title}</a> {/block:ifCustomLinkFourTitle}</center></div> {block:Description}{Description}{/block:Description}<div class="border"></div> <BR>{block:IfEndlessScrolling}<div class = "autopagerize_page_element">{/block:IfEndlessScrolling} {block:Posts} <div id="entry"> <div class="holder">{block:Text}{block:Title}<div class="ptitle">{Title}</div>{/block:Title}{Body}<div class="perma"><div style="border-top:1px dotted #EEE;"></div>{TimeAgo} | <a href="{Permalink}">Permalink</a></div>{/block:Text}</div> {block:Photo}{block:IndexPage}<a href="{Permalink}">{/block:IndexPage}{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}<img src="{block:IndexPage}{PhotoURL-HighRes}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}" width="450px"/>{block:IndexPage}</a>{/block:IndexPage}{block:IfNotHideCaptions}{Caption}{/block:IfNotHideCaptions}{block:PermalinkPage}{LinkCloseTag}{block:IfHideCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfHideCaptions}{/block:PermalinkPage}{/block:Photo} {block:Photoset}{Photoset-500}{/block:Photoset} {block:Quote}<div class="quote">{Quote}</div><div style="border-top:1px dotted #EEE;"></div><div class="source">{block:Source}{Source}{/block:Source} | <span style="font-family:times new roman; font-weight:bold; font-style:italic; font-size:10px;"> <a href="{Permalink}" title="{NoteCountWithLabel}">Permalink</a></span> </div>{/block:Quote} <div class="holder">{block:Link}<div id="textperma"><a href="{Permalink}" title="{NoteCountWithLabel}">IV</a></div><div class="ptitle"><a href="{URL}" {Target}>{Name}</a></div>{block:Description}{Description}{/block:Description}<div class="perma"><div style="border-top:1px dotted #EEE;"></div>{TimeAgo} | <a href="{Permalink}">Permalink</a></div>{/block:Link}</div> <div class="holder">{block:Chat}{block:Title}{Title}{/block:Title}<div class="lines">{block:Lines}<div class="line {Alt}">{block:Label}<b>{Label} </b>{/block:Label}{Line}</div>{/block:Lines}</div><div class="perma"><div style="border-top:1px dotted #EEE;"></div>{TimeAgo} | <a href="{Permalink}">Permalink</a></div>{/block:Chat}</div> {block:Audio}<div id="textperma"><a href="{Permalink}" title="{NoteCountWithLabel}">{PlayCount} | Permalink<BR>{block:ExternalAudio}<a href="{ExternalAudioURL}">Download</a>{/block:ExternalAudio}</a></div><div class="audio">{AudioPlayerGrey}</div><center>{block:Caption}{Caption}{/block:Caption}</center>{/block:Audio} <div class="video">{block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}</div> <div class="holder">{block:Answer}<div class="question"><i>{Question}</i></div>by <i>{Asker}</i>{Answer}<div class="perma"><div style="border-top:1px dotted #EEE;"></div>Asked {TimeAgo} | <a href="{Permalink}">Permalink</a></div>{/block:Answer}</div> {block:PostNotes}{PostNotes}{/block:PostNotes}</div>{/block:Posts}{block:IfNotEndlessScrolling}<BR><div style="margin:auto; margin-top:-10px; font-size:14px; width:450px; background-color:{color:header}; "><div class="right">{block:PreviousPage}<a href="{PreviousPage}" title="newer entries"><<</a>{/block:PreviousPage} <div class="totalright">{block:NextPage}<a href="{NextPage}" title="older entries">>></a>{/block:NextPage}</div></div></span>{/block:IfNotEndlessScrolling} {block:IfEndlessScrolling}</div>{/block:IfEndlessScrolling}<div style="position:fixed; bottom:3px; right:3px; font-size:10px; letter-spacing:0px; opacity:.8;;"><a href="http://sleepingtigers.tumblr.com/"><i>theme</i> </a></div> {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource} </div> </body> </html>
  5. I'm confused about why a paragraph element is acting a certain way. I don't know how a p element is suppose to act, so I don't know if this is my fault.The paragraph is on the right side of an image with a float left, and the text in the paragraph element stays to the right of the image as I imagined it would. However, the paragraph element itself is also covering the image so that the image is not selectable.I've since changed the paragraph element to a span and it seemed to fix the problem, but I'm still confused about why the paragraph element did that. Is there some way to define the size of a p element, or perhaps some other way to fix this problem? Here's a snippet or the original code: Basically part of the <p id="wedText"> was over top of <img id="weddingLimo"<div id="weddings"><img id="weddingLimo" src="images/wedding-limo.jpg" width="168" height="112" alt="Wedding Limo Image" /> <span id="wedHeader">WEDDINGS</span> <p id="wedText">Trust us for all your wedding and special occasion transportation needs for wedding party, friends and family.</p></div>}#weddings { position: absolute; left: 10px; top: 20px; height: 111px; width: 334px; vertical-align: middle;}#weddingLimo { float: left; margin-right: 13px;}#wedHeader { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-weight: bold; color: #666; position: relative; top: 4px;}#wedText { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; color: #666; position: relative; top: 12px;} For a closer look at my code (current):HTML - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Sarasota-Tampa Express Homepage</title><link href="all.css" rel="stylesheet" type="text/css" /><script type="text/javascript">function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}</script></head><body id="theHeader" onload="MM_preloadImages('images/homeActive.png','images/about-usActive.png','images/route-and-scheduleActive.png','images/flight-informationActive.png','images/fareActive.png','images/one-way-over.png','images/round-trip-over.png','images/one-way-over2.png','images/round-trip-over2.png')" ><table id="headerTable" border="0" cellspacing="0" cellpadding="0"> <tr> <td id="logoBox"> <img src="images/Sarasota-Tampa-Express-Logo.png" width="205" height="75" alt="Logo" /></td> <td> <div id="rightsideHeader"> <p id="tagLine">We make things convenient for you! <span id="phoneNumber">Call Today! (941)366-6600</span></p> <div align="left" id="navigation"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/homeActive.png',1)"><img src="images/home.png" alt="Home" name="Home" width="82" height="33" border="0" id="Home" /></a><a href="thanks.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('AboutUs','','images/about-usActive.png',1)"><img src="images/about-us.png" alt="About Us" name="AboutUs" width="110" height="33" border="0" id="AboutUs" /></a><a href="thanks.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Route','','images/route-and-scheduleActive.png',1)"><img src="images/route-and-schedule.png" alt="Route & Schedule" name="Route" width="178" height="33" border="0" id="Route" /></a><a href="thanks.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FlightInfo','','images/flight-informationActive.png',1)"><img src="images/flight-information.png" alt="Flight Information" name="FlightInfo" width="184" height="33" border="0" id="FlightInfo" /></a><a href="thanks.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Fare','','images/fareActive.png',1)"><img src="images/fare.png" alt="Fare" name="Fare" width="70" height="33" border="0" id="Fare" /></a></div> </div> </td> </tr></table><table id="mainTable" width="1024px" height="174px" align="center" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="top" colspan="2" valign="bottom"><img align="middle" alt="Introductory Homepage Image" src="images/shuttlebus.png"><p id="welcome" align="left">Welcome to Sarasota - Tampa Express</p><p id="statement" align="left">Sarasota-Tampa Express offers regular daily round trip shuttle service<br>to and from Tampa International Airport.</p></td> </tr> <tr> <td id="bottomLeft" align="left" valign="bottom"> <p id="otherServicesText">Other Services</p> <div id="otherServicesBoxes"><img src="images/other-services.png" width="348" height="300" alt="Other services background" /> <div id="weddings"><img id="weddingLimo" src="images/wedding-limo.jpg" width="168" height="112" alt="Wedding Limo Image" /> <span id="wedHeader">WEDDINGS</span><br /> <span id="wedText">Trust us for all your wedding and special occasion transportation needs for wedding party, friends and family.</span></div> <div id="events"><img id="eventBus" src="images/event-bus.jpg" width="179" height="112" alt="Event Bus Image" /> <span id="eveHeader">SPORTS EVENTS</span><br /> <span id="eveText">Let us be your means<br />of transporting all your family, friends, and<br /> their friends to that<br />next big game.</span></div> </div> </td> <td class="bottomRight" align="center" valign="top"> <p>Rental Fleet</p> <img width="552" height="140" alt="Rental Fleet" src="images/rental-fleet.png"> <p id="limoVans">Our limo vans get your big family from place to place.</p><p id="townCars">Vacation in style with one of our luxurious town-cars.</p><p id="travelBus">Transport employees to a big function in our travel bus.</p> <div id="flightTypeBox" align="center"> <img src="images/flight-type-box.png" width="130px" height="205px" alt="Flight Type Box" /> <p id="fromAirport">From Airport</p> <a id="oneWayFA" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('one way','','images/one-way-over.png',1)"><img src="images/one-way.png" alt="from airport one way" name="one way" width="85" height="25" border="0" id="one way" /></a> <a id="roundTripFA" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('round trip','','images/round-trip-over.png',1)"><img src="images/round-trip.png" alt="from airport round trip" name="round trip" width="85" height="25" border="0" id="round trip" /></a> <p id="toAirport">To Airport</p> <a id="oneWayTA" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('one way 2','','images/one-way-over2.png',1)"><img src="images/one-way2.png" alt="to airport one way" name="one way 2" width="85" height="25" border="0" id="one way 2" /></a> <a id="roundTripTA" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('round trip 2','','images/round-trip-over2.png',1)"><img src="images/round-trip2.png" alt="to airport round trip" name="round trip 2" width="85" height="25" border="0" id="round trip 2" /></a></div> </td> </tr> </table> </body> CSS - /*==== universal ====*/.body { font-family: Verdana,Geneva,sans-serif;}.table { margin: 0; padding: 0;}.td { border-style: none; margin: 0; padding: 0;}img { border-style: none; text-decoration: none;}p {margin: 0px;}/*==== header ====*/#theHeader { background-image: url("images/header-gradient.png"); background-repeat: repeat-x; margin: 0;}#headerTable { height: 150px; margin-left: auto; margin-right: auto; width: 1024px;}#logoBox { padding-left: 50px; width: 268px;}#tagLine { color: #FFFFFF; font-family: Verdana,Geneva,sans-serif; font-size: 16px; font-style: italic; height: 45px; margin: 0; padding-top: 35px; text-align: left; width: 706px;}#rightsideHeader { height: 150px; margin-top: 0; width: 624px;}#phoneNumber { padding-left: 100px;}#navigation { height: 70px; width: 706px;}/*==== main content ====*/#mainTable { background-image: url("images/background-gradients.png");}.top { height: 174px; margin: 0; overflow: hidden; padding: 0; width: 1024px;}.top img { float: left; margin-right: 15px;}#welcome {color: #C34306;font-family: Arial,Helvetica,sans-serif;font-size: 28px;font-style: normal;font-weight: bold;height: auto;text-shadow: 2px 2px 15px #7F7F7F;width: 1024px;text-indent: -37px;margin-bottom: 45px;margin-top: 0px;margin-right: 0px;margin-left: 0px;}#statement { color: #000000; font-family: Arial,Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-weight: bold; height: auto; margin: 0; width: 1024px;}#bottomLeft { height: 440px; width: 406px;}/*==== bottom right ====*/.bottomRight {height: 440px;width: 618px;}.bottomRight p {font-family: Arial, Helvetica, sans-serif;font-weight: bold;font-style: italic;font-size: 19px;text-align: center;}.bottomRight img {margin-top: auto;margin-right: auto;margin-bottom: auto;margin-left: auto;} #limoVans {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: normal;color: #666666;width: 160px;float: left;margin-left: 45px;margin-right: 22px;position: relative;top: -36px;font-style: normal;}#townCars {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: normal;color: #666666;width: 160px;float: left;margin-right: 24px;position: relative;top: -36px;font-style: normal;}#travelBus {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: normal;color: #666666;width: 160px;float: left;position: relative;top: -36px;font-style: normal;}#flightTypeBox {margin-right: 30px;float: right;width: 130px;height: 205px;vertical-align: middle;position: relative;top: -19px;}#fromAirport {font-family: Arial, Helvetica, sans-serif;font-weight: bold;font-size: 12px;color: #4D4D4D;position: relative;top: -168px;font-style: normal;}#oneWayFA {position: relative;top: -165px;}#roundTripFA {position: relative;top: -163px;}#toAirport {font-family: Arial, Helvetica, sans-serif;font-weight: bold;font-size: 12px;color: #4D4D4D;position: relative;top: -153px;font-style: normal;}#oneWayTA {position: relative;top: -149px;}#roundTripTA {position: relative;top: -147px;}/*==== bottom left ====*/#otherServicesBoxes {height: 300px;width: 348px;margin-left: 30px;margin-bottom: 63px;position: relative;}#otherServicesText {font-family: Arial, Helvetica, sans-serif;font-weight: bold;font-style: italic;font-size: 19px;margin-left: 63px;}#events {position: absolute;bottom: 10px;left: 10px;height: 111px;width: 325px;}#weddings {position: absolute;left: 10px;top: 20px;height: 111px;width: 334px;vertical-align: middle;}#weddingLimo {float: left;margin-right: 13px;}#wedHeader {font-family: Arial, Helvetica, sans-serif;font-size: 14px;font-style: normal;font-weight: bold;color: #666;position: relative;top: 4px;}#wedText {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-style: normal;font-weight: normal;color: #666;position: relative;top: 12px;}#eventBus {float: left;margin-right: 13px;}#eveHeader {font-family: Arial, Helvetica, sans-serif;font-size: 14px;font-style: normal;font-weight: bold;color: #666;position: relative;top: 4px;}#eveText {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-style: normal;font-weight: normal;color: #666;position: relative;top: 12px;}
  6. How can I make a button image overlap without overlapping the selectable areas? My idea was to use the map and area tags to change the selectable area of each image but I don't know how to overlap the images.Honestly, I don't know if this is the best way to handle my problem and I would be more than happy to hear suggestions.
×
×
  • Create New...