Jump to content

Search the Community

Showing results for tags 'html css'.



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. I need help on creating an independent page in parent HTML where feeds are displayed just like twitter and Facebook. The navigation area remains staid while scrolling up it down. Thanks a lot.
  2. I want to do what this codepen does with borders he makes a </> symbol at the end of this first border, in the middle of the end, and his two last borders are split with </> in the middle of them. I know I can make a div and make it like a border, then place an image next to it to make it look like this, or make two divs with an image in the middle, but in the codepen it doesn't look like he does that and it seems messy to make all those divs for an effect like this. But I'm new to coding so I can't find out in his code where he makes the borders like that (----------</> , -------</>--------). Can anyone help me out on how to make a border like he does? I will greatly appreciate any help. His borders are also a different length from his text, I want to know how he does this. I think his borders are either an image or a div, but I'm not sure from looking at his code. I think it might be the javascript too, but I can't tell because I haven't learned any javascript yet.
  3. I am trying to create my first website and there is one problem that I can't get fixed. I have 3 images placed in line and the idea is that by hovering over the images there sould appear a colored layer. So far so good, but the problem is that by hovering over the image the width of the layer is okay but it is to high. It seems that the bottom of the layer is following the class="cd-container". I have tried to change magin, padding, display etc, without succes. (I have add 2 printscreens) Could any one tell me what I am doing wrong. The html: <div class="cd-container"> <div class="container-work"> <div class="title-page-work"> <p class="title-work">Een gedeelte van ons werk.</p> </div> <div class="text-page-work"> <p class="description-work">Hover over de foto’s voor meer informatie over de site, wanneer de foto wordt aangeklikt wordt men doorgestuurd naar de betreffende website.</p> </div> <div class="container-work-items"> <div id="work-1"> <div id="work-img-1"><img src="work/thumbs/work1.jpg" alt="Muzieklessen-Berkelland"> <div class="layer-work-1"> <div id="logo-1"><a href="https://muzieklessen-berkelland.nl/" target='_blank'><img src="work/thumbs/Logo_Ton_Rita_lijn_transparant.png" alt="Muzieklessen-Berkelland"></a></div> </div> </div> </div> <div id="work-2"> <div id="work-img-2"><img src="work/thumbs/work2.jpg" alt="Dutchview.us"> <div class="layer-work-2"> <div id="logo-2"><a href="http://dutchview.us/" target='_blank'><img src="work/thumbs/Dutch_view_transparant.png" alt="Dutchview.us"></a></div> </div> </div> </div> <div id="work-3"> <div id="work-img-3"><img src="work/thumbs/work3.jpg" alt="Loonbedrijf te Riet Haaksbergen"> <div class="layer-work-3"> <div id="logo-3"><a href="http://loonbedrijfteriet.nl/" target='_blank'><img src="work/thumbs/te_riet.png" alt="Loonbedrijf te Riet Haaksbergen"></a></div> </div> </div> </div> </div> </div></div> and the css looks like: .cd-container { width: 100%; max-width: 100%; margin: 0 auto;}.cd-container::after { /* clearfix */ content: ''; display: table; clear: both;}.container-work { width: 100%; position: relative; float: right;}.description{ width: 100%; height: 30px; margin-left: auto; margin-right: auto; position: relative; margin-top: 90px;}.description-work { text-align: center; margin-left: auto; margin-right: auto;}.title-page-work { width: 100%; max-width: 1170px; height: 40px; margin-top: -2%; margin-left: auto; margin-right: auto; position: relative; text-align: center;}.title-page-work p{ font-size: 40px; font-weight: 200; color: #000000;}.text-page-work { width: 100%; max-width: 1170px; height: 20px; margin-top: 2.5%; margin-left: auto; margin-right: auto; position: relative;}.text-page-work p{ font-size: 20px; font-weight: 200; color: #000000;}.container-work-items { width: 100%; padding-top: 7%; }#work-1 { width: 33.333%; position:relative; height: 100%; display: inline-block; float: left;}#work-img-1 { width: 100%; position:relative; height: 100%; text-align: center;}.layer-work-1 { height: 100%; width: 100%; top: 0; right: 0; bottom: 0; left: 0; position: absolute; background: rgba(22, 254, 22, 0.9); opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}.layer-work-1:hover { opacity: 1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}#logo-1 { position: relative; z-index: 2; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}#work-2 { width: 33.333%; position:relative; height: 45vh; display: inline-block; float: left;}#work-img-2 { width: 100%; position:relative; height: 100%; text-align: center;}.layer-work-2 { height: 100%; width: 100%; top: 0; right: 0; bottom: 0; left: 0; position: absolute; background: rgba(149, 247, 247, 0.9); opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}.layer-work-2:hover { opacity: 1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}#logo-2 { position: relative; z-index: 2; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}#work-3 { width: 33.333%; position:relative; height: 45vh; display: inline-block; float: left;}#work-img-3 { width: 100%; position:relative; height: 100%; text-align: center;}.layer-work-3 { height: 100%; width: 100%; top: 0; right: 0; bottom: 0; left: 0; position: absolute; background: rgba(224, 221, 221, 0.9); opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}.layer-work-3:hover { opacity: 1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}#logo-3 { position: relative; z-index: 2; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);} Maybe is someone willing to look what I have done wrong and how I can fix this. Thanks
  4. Hi guys, I hope you can help. I'm a woodworker designing my own website and I don't know anything about html or css other than what I've found on Google. I've got a transparent header (logo) and I want my page content to disappear when it reaches the bottom of the header; at the moment it's scrolling behind the header. I've read a lot of things that makes perfect web-sense to a woodworkrker, like: divs and classes and wrappers and bottom-wrappers, padding-top, overflow: y etc. Problem is I don't know how to implement this or where to stick it. Please can you try explain it in a way that a woodworker will understand. Even an example of the code I need will do. Thanks in advance This is my messy code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>NW- Home</title><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"><!-- saved from url=(0014)about:internet --><link type="text/css" rel="stylesheet" href="xsp_styles.css"><link rel="canonical" href="" /><style>html, body { height: 100%; width: 100%; padding: 0; margin: 0;}#full_screen_background_image { z-index: -999; min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0;}</style><style>html, body { height: 100%; width: 100%; padding: 0; margin: 0;}#logo { z-index: 1000; height: auto; position: fixed; top: 0; left: 50%;;}</style><style>html, body { height: 100%; width: 100%; padding: 0; margin: 0;}#home_page { z-index: -999; height: auto; position: fixed; top: 0; left: 30;}</style><style>html, body { height: 100%; width: 100%; padding: 0; margin: 0;}#about_us { z-index: -999; height: auto; position: fixed; top: 164; left: 30;}</style><style>html, body { height: 100%; width: 100%; padding: 0; margin: 0;}#products { z-index: -999; height: auto; position: fixed; top: 335; left: 30;}</style><style>html, body { height: 100%; width: 100%; padding: 0; margin: 0;}#contact_us { z-index: -999; height: auto; position: fixed; top: 501; left: 30;}</style><style>html, body { height: 100%; width: 100%; padding: 0; margin: 0;}#copyright { z-index: -999; height: auto; position: fixed; bottom: 0; left: 0;}</style><style>html, body { height: 100%; width: 100%; padding: 0; margin: 0;}#facebook_icon { z-index: -999; height: auto; position: fixed; top: 0; right: 30;}</style><style>html, body { height: 100%; width: 100%; padding: 0; margin: 0;}#back_to_top { z-index: -999; height: auto; position: fixed; bottom: 0; right: 30;}</style><link type="text/css" rel="stylesheet" href="INFO_BAR_MENU.css"><script type="text/javascript" src="milonic_src.js"></script><script type="text/javascript" src="mmenudom.js"></script></head><body><a name="top"></a><img id="full_screen_background_image" src="images/Hickory BG3.png" alt="" title=""/><img id="logo" src="images/Logo10.png" alt=""/><a href=""><img id="home_page" src="images/Home1 128x128 C.png" alt="" title="Home"></a><a href=""><img id="about_us" src="images/About Us C.png" alt="" title="About"></a><a href=""><img id="products" src="images/Products6 128x128 C.png" alt="Cataloque" title="Products"></a><a href=""><img id="contact_us" src="images/Contact Us 128x128 C.png" alt="Contact Details" title="Contact Us"></a><a href=""><img id="facebook_icon" border="0" src="images/Follow Us on Facebook C.png" alt="Facebook Page" title="Follow Us on Facebook"/></a><a href="#top"><img id="back_to_top" border="0" src="images/Back To Top 128x128 C.png" alt="Back to Top" title="Back to the Top"/></a><img id="copyright" src="images/Copyright2.png" alt=""/><table class="XSP_OUTLINE" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td colspan="3" class="XSP_INFO_BAR"><blockquote style="MARGIN-RIGHT: 0px" dir="ltr"> <blockquote style="MARGIN-RIGHT: 0px" dir="ltr"> <blockquote style="MARGIN-RIGHT: 0px" dir="ltr"> <blockquote style="MARGIN-RIGHT: 0px" dir="ltr"> <blockquote style="MARGIN-RIGHT: 0px" dir="ltr"> <blockquote style="MARGIN-RIGHT: 0px" dir="ltr"> <p align="left"><table border="0" cellspacing="0" cellpadding="0" ><tbody><tr><td><script type="text/javascript" src="script/INFO_BAR_MENU.js"></script><script type="text/javascript" src="preloadmenuimages.js"></script></td></tr></tbody></table><noscript><table width="100%"><tbody><tr><td> <table class="mainINFO_BAR_MENU"> <tbody> <tr><td></td></tr></tbody></table></td></tr></tbody></table></noscript></p> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote></blockquote></td></tr><tr><td class="XSP_LEFT_PANEL_SPC" id="XSP_LEFT_PANEL_SPC"> </td><td class="XSP_CENTER_PANEL" rowspan="2"><table class="XSP_CENTER_PANEL" cellpadding="0" cellspacing="0" border="0"><tr><td class="XSP_MAIN_PANEL"></td></tr></table></td><td class="XSP_RIGHT_PANEL_SPC" id="XSP_RIGHT_PANEL" rowspan="2"><div class="XSP_RIGHT_PANEL"><p></p></div></td></tr><tr><td class="XSP_LEFT_PANEL_2" id="XSP_LEFT_PANEL" style="FONT-SIZE:1px;" height=1><div class="XSP_LEFT_PANEL"></div></td></tr></table><script language="javascript" type="text/javascript"><!--document.getElementById("XSP_LEFT_PANEL_SPC").innerHTML = document.getElementById("XSP_LEFT_PANEL").innerHTML;document.getElementById("XSP_LEFT_PANEL").innerHTML = " ";//--></script></body></html> Got it sorted thanks
  5. Im sure this is a simple solution by my links arent working at the top please help. thanks. index.html stylesheet.css
  6. I'm tired of looking for a editor for my web site just to find out that all I get is errors on my page. Does any one know of a editor that I can add to a HTML page that has some basic buttons and crap like that, Some thing simple and easy to install. I all ready Tried TinyMCnicEdit << -- This guy wanted to charge me for supportckEditorCLReditor I'm looking for some thing that's as easy as nicEdit. Joe
×
×
  • Create New...