Search the Community

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.

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.

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

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

Im sure this is a simple solution by my links arent working at the top please help. thanks. index.html stylesheet.css