I am working on the following site: http://tcsdesignreno.com/nvvolunteers/.
It looks great in Firefox and Chrome but when I go to the home page in Internet explorer it drops the navigation menu down along with the social media icons on the left side (see the image below). Can anyone help me with finding the error in my css code so it will look correct across all browsers.
I am testing in IE 10 but have the same problems in later version.
I think the problem is coming from the top-margin in the social media area css but I can't figure out how to position it right above the nav bar without using this code.
POSSIBLE HTML CODE
<div class="social-media-home">
<a title="Follow us on Facebook" href="https://www.facebook.com/NevadaVolunteers" target="_blank">
<img class="alignleft size-medium wp-image-924" title="Follow us on Facebook" alt="Facebook" src="http://tcsdesignreno.com/nvvolunteers/wp-content/uploads/2013/05/facebook.png" width="32" height="32" />
</a>
<a title="Check us out on Twitter" href="https://twitter.com/nvvolunteers" target="_blank">
<img class="alignleft size-medium wp-image-922" title="Follow us on Twitter" alt="Twitter" src="http://tcsdesignreno.com/nvvolunteers/wp-content/uploads/2013/05/twitter.png" width="32" height="32" />
</a>
<a title="Pin us on Pinterest" href="http://pinterest.com/nvvolunteers/" target="_blank">
<img class="alignleft size-full wp-image-921" title="Pin us on Pinterest" alt="Pinterest" src="http://tcsdesignreno.com/nvvolunteers/wp-content/uploads/2013/05/pinterest.png" width="32" height="32" />
</a>
<a title="See us on Instagram" href="http://instagram.com/nvvolunteers#" target="_blank">
<img class="alignleft size-medium wp-image-923" title="See us on Instagram" alt="Instagram" src="http://tcsdesignreno.com/nvvolunteers/wp-content/uploads/2013/06/instagram_64x64.png" width="32" height="32" />
</a>
<a href="#" target="_blank">
<img class="alignleft size-full wp-image-926" style="display: none;" title="Add us on Google +" alt="Google Plus" src="http://tcsdesignreno.com/nvvolunteers/wp-content/uploads/2013/05/GooglePlus.png" width="32" height="32" />
</a>
<a href="#" target="_blank">
<img class="alignleft size-medium wp-image-925" style="display: none;" title="Find us on Linked In" alt="LinkedIn" src="http://tcsdesignreno.com/nvvolunteers/wp-content/uploads/2013/05/linkedin.png" width="32" height="32" />
</a>
<a href="#" target="_blank">
<img class="alignleft size-medium wp-image-923" style="display: none;" title="Watch us on YouTube" alt="YouTube" src="http://tcsdesignreno.com/nvvolunteers/wp-content/uploads/2013/05/youtube.png" width="32" height="32" />
</a>
</div>
<div id="home-nav-container">
<div class="resizer"><span id="font-resizer-ticker"></span></div>
<div id="home-nav"><?php wp_nav_menu( array('menu' => '5' )); ?></div>
</div>
POSSIBLE CSS CODE
.social-media-home {
position:relative;
float: right;
margin: 4.2rem 0.5rem 0 0;
clear:right;
}
.social-media-home img {
margin: 1rem 5px 0 0!important;
}
#home-nav-container {
float: right;
text-align: right;
clear: right;
}
#home-nav {
float: right;
padding: 0.8rem 1.0714rem 0 0;
}
#home-nav li{
display: inline-block;
font-weight:bold;
}
#home-nav li a{
text-decoration:none;
}
#home-nav li:not(:last-child):after
{
content: ' |';
}
.resizer {
/*clear:right;*/
float:right;
padding: 0.8rem 1.0714rem 0 0;
}
SCREEN SHOT
float left on .main-navigation and
float left on the title link inside the header hgroup -> I'd recommend putting this inside a div
Below is the site working in IE
Related
I thought I understood float, but clearly I don't.
I have a div (class="Sophia") made of a header ("h2"), and an unordered list ("ul") containing images that I want to collapse into an L-formation. Specifically I want the header (containg the text "sophia") to go into the gap that is under "Dorothy" and to the left of "Rose."
I realize that I could accomplish this by breaking the header out of the div, but for the sake of learning I want to know how to use CSS to style the div as a whole unit such that it "breaks" between elements into an L, such that the upper part of the L goes into empty space, just with CSS.
How things are now:
Kind of what the goal is:
If you know how to pull this off, I'd love it if you could show me how!
Thanks!
This is the codepen: http://codepen.io/ihatecoding/pen/WpBZpy
This is the snippet:
/* body formatting, not important */
body {font-family:"Gudea";
background-color: lightGray;
padding: 15px;}
.sophiaword{color:darkblue;}
h1 {text-align:center;}
a {text-decoration:none;
color:darkblue;}
.wrapper{
padding: 10px 25%;
width:50%;
}
/*this is the formatting that matters*/
.dorothy,
.rose,
.sophia {
float:left;
}
.dorothy,
.rose {
width:50%;
}
.sophia {
width:auto;
}
.dorothy li {
width:100%;
}
.rose li {
width:47%;
}
.sophia li {
width:20%;
display:block;
float:left;
}
.dorothy h2,
.rose h2,
.sophia h2{
color:black;
font-size: 40px;
margin:0;
}
li {
background-color: #f7f7f7;
margin:0 1% !important;
padding:0 !important;
width: 22%;
display: inline-block;
}
.cat-post-item span,
.cat-post-item a {
color: darkSlateGray;
font-weight: 700;
letter-spacing: -1px;
}
.cat-post-item img {
margin: 0 !important;
height: 150px;
object-fit: cover;
}
.cat-post-thumbnail span,
.cat-post-thumbnail img {
width:100% !important;
}
.sophia li {
width:20%;
display:block;
float:left;
}
<span><h1>I'd like to know how to use CSS and float to get the blue text "<span class="sophiaword">Sophia</span>" to flow so it breaks away from the row of sophia images, and ends up next to the left of the the bottom picture of rose. In the end I'd like the "sophia" div to make an "L"-shape, but stay as one div. Currently the div starts on a new line and I don't want that. </h1></span>
<div class="wrapper">
<div class=" dorothy">
<h2>
Dorothy
</h2>
<ul>
<li class='cat-post-item'>
<a class="cat-post-thumbnail" href="http://www.example.com" >
<span>
<img width="150" height="150" src="https://pbs.twimg.com/media/Buhe7x1CAAAIW02.jpg" class="attachment-150x150 size-150x150 wp-post-image" />
</span>
</a>
<a class="cat-post-title" href="http://www.example.com" >Dorothy (down there ↓)</a>
</li>
</ul>
</div>
<div class="rose">
<h2 >
Rose
</h2><ul >
<li class='cat-post-item'>
<a class="cat-post-thumbnail" href="http://www.example.com" >
<span><img width="150" height="148" src="http://www.dvdizzy.com/images/g-i/ggs2-12.jpg" class="attachment-150x150 size-150x150 wp-post-image" />
</span>
</a>
<a href="http://www.example.com" >Rose1</a>
</li>
<li class='cat-post-item'>
<a class="cat-post-thumbnail" href="http://www.example.com" >
<span>
<img width="150" height="112" src="http://www.dvdizzy.com/images/g-i/ggs2-12.jpg" class="attachment-150x150 size-150x150 wp-post-image" />
</span>
</a>
<a href="http://www.example.com" >Rose2</a>
</li>
<li class='cat-post-item'>
<a class="cat-post-thumbnail" href="http://www.example.com" >
<span>
<img width="147" height="150" src="http://www.dvdizzy.com/images/g-i/ggs2-12.jpg" class="attachment-150x150 size-150x150 wp-post-image" />
</span>
</a>
<a href="http://www.example.com" > ( ← over there ) Rose3 </a>
</li>
<li class='cat-post-item'>
<a class="cat-post-thumbnail" href="http://www.example.com" >
<span>
<img width="92" height="150" src="http://www.dvdizzy.com/images/g-i/ggs2-12.jpg" class="attachment-150x150 size-150x150 wp-post-image" />
</span>
</a>
<a href="http://www.example.com" >Rose4 </a>
</li>
</ul>
</div>
<div class=" sophia">
<h2 class="widget-title">
Sophia
</h2>
<ul >
<li class='cat-post-item'>
<a class="cat-post-thumbnail" href="http://www.example.com" >
<span>
<img width="150" height="101" src="http://underscoopfire.com/wp-content/uploads/2013/02/sophia-petrillo.jpg" class="attachment-150x150 size-150x150 wp-post-image" />
</span>
</a>
<a href="http://www.example.com" >Sophia1</a>
</li>
<li class='cat-post-item'>
<a class="cat-post-thumbnail" href="http://www.example.com" >
<span>
<img width="150" height="101" src="http://underscoopfire.com/wp-content/uploads/2013/02/sophia-petrillo.jpg" class="attachment-150x150 size-150x150 wp-post-image" />
</span>
</a>
<a href="http://www.example.com" >Sophia2</a> </li><li class='cat-post-item'>
<a class="cat-post-thumbnail" href="http://www.example.com" >
<span> <img width="150" height="101" src="http://underscoopfire.com/wp-content/uploads/2013/02/sophia-petrillo.jpg" class="attachment-150x150 size-150x150 wp-post-image" />
</span>
</a>
<a href="http://www.example.com" >Sophia3</a>
</li>
<li class='cat-post-item'><a class="cat-post-thumbnail" href="http://www.example.com" >
<span>
<img width="150" height="101" src="http://underscoopfire.com/wp-content/uploads/2013/02/sophia-petrillo.jpg" class="attachment-150x150 size-150x150 wp-post-image" />
</span>
</a>
<a href="http://www.example.com" >Sophia4</a>
</li>
</ul>
</div>
</div>
I have this code, I heard that hspace will be not in use anymore. How can I add space between them on above and between 10px would be good, I tried with margin-top did not worked and broke my other widgets as well.
Here is an example:
Here the code does not have space between them on vertical
This is the wide view here it looks better, once resized into smaller screens I get the above result
I would like to have 10px beween them and when resized on top too.
I want them all in once code, since this is a widget I want it with built in CSS.
<div align="center">
<a href="https://facebook.com/testclue">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/Facebook.png" align="middle" alt="TestClue on Facebook" height="60" width="60" hspace="10">
</a>
<a href="https://twitter.com/testclue">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/Twitter.png" align="middle" alt="TestClue on Twitter" height="60" width="60" hspace="10">
</a>
<a href="https://www.linkedin.com/company/testclue">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/in.png" align="middle" alt="TestClue on LinkedIN" height="60" width="60" hspace="10">
</a>
<a href="https://plus.google.com/+Testclue">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/G.png" align="middle" alt="TestClue on Google+" height="60" width="60" hspace="10">
</a>
</div>
I would recommend to remove all the inline code that you have on your tags, as some of them got deprecated or are not as useful as the CSS.
I would suggest you to do something like this.
For the HTML:
<div id="social-networks-container">
<div class="social-network">
<a href="https://facebook.com/testclue">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/Facebook.png" />
</a>
</div>
<div class="social-network">
<a href="https://twitter.com/testclue">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/Twitter.png" />
</a>
</div>
<div class="social-network">
<a href="https://www.linkedin.com/company/testclue">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/in.png" />
</a>
</div>
<div class="social-network">
<a href="https://plus.google.com/+Testclue">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/G.png" />
</a>
</div>
</div>
And for the CSS:
#social-networks-container .social-network {
display: inline-block;
margin: 10px;
}
#social-networks-container .social-network a {
display: block;
}
An example of this working: https://jsfiddle.net/vfvhqvzf/1/
UPDATE:
If you just want to use inline code on your html you could also try this:
<div style="display:inline-flex;">
<a href="https://facebook.com/testclue" style="display: block;padding: 10px;">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/Facebook.png" />
</a>
<a href="https://twitter.com/testclue" style="display: block;padding: 10px;">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/Twitter.png" />
</a>
<a href="https://www.linkedin.com/company/testclue" style="display: block;padding: 10px;">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/in.png" />
</a>
<a href="https://plus.google.com/+Testclue" style="display: block;padding: 10px;">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/G.png" />
</a>
</div>
Demo: https://jsfiddle.net/vfvhqvzf/4/
Maybe you can try this:
padding: 10px;
Add:
style="padding-top:10px;"
to each 'a' (anchor) element
This is my Code for a FAST click on a website.
Website URL: www.vegastoothdr.com/wp_site/
<body>
<div id="wpadminbar" style="background-color: black; padding-top: 0px;border-color: white;">
<span class="row" style="vertical-align: top">
<!-- PHONE ICON -->
<a href="tel:(702) 473-5100">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/phone.png" width="60" height="36" style="padding-left: 20px">
</a>
<!-- CALENDAR ICON -->
<a href="appointment">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/calendar.png" width="60" height="36" style="padding-left: 20px">
</a>
<!-- EMAIL ICON -->
<a href="contact">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/envelope.png" width="67" height="36" style="padding-left: 20px">
</a>
<!-- PIN ICON -->
<a href="https://www.google.com/maps/place/1070+W+Horizon+Ridge+Pkwy+%23121,+Henderson,+NV+89012,+USA/#36.022368,-115.0346407,17z/data=!3m1!4b1!4m2!3m1!1s0x80c8d16f85764fa7:0x702e5efb00bd1ffb">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/pin.png" width="49" height="36" style="padding-left: 20px">
</a>
</span>
</div>
<header>
<!-- Nav CODE -->
</header>
Okay, Now i have the CODE and I placed a CSS code on the last line on the <head>section
#media screen and (max-width: 782px)
{
div#wpadminbar
{
height: 55px;
min-width: 300px;
}
}
Okay... It works on the mobile device now.
But, The links are not working. So i cant click the icons. none of the links are working.
TEST TWO:
I placed it under the Header Section and the links works.. But the media query is not working. Soo weird.
I have placed the code below where the links are working but the media query is not working.
<body>
<header>
<div id="wpadminbar" style="background-color: black; padding-top: 0px;border-color: white;">
<span class="row" style="vertical-align: top">
<!-- PHONE ICON -->
<a href="tel:(702) 473-5100">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/phone.png" width="60" height="36" style="padding-left: 20px">
</a>
<!-- CALENDAR ICON -->
<a href="appointment">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/calendar.png" width="60" height="36" style="padding-left: 20px">
</a>
<!-- EMAIL ICON -->
<a href="contact">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/envelope.png" width="67" height="36" style="padding-left: 20px">
</a>
<!-- PIN ICON -->
<a href="https://www.google.com/maps/place/1070+W+Horizon+Ridge+Pkwy+%23121,+Henderson,+NV+89012,+USA/#36.022368,-115.0346407,17z/data=!3m1!4b1!4m2!3m1!1s0x80c8d16f85764fa7:0x702e5efb00bd1ffb">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/pin.png" width="49" height="36" style="padding-left: 20px">
</a>
</span>
</div>
I fixed the issue, There was JS script that was adding a Div for Video. It seems the DIV was on top on my code.
I deleted it and it fixed it :)
Link to the site: http://www.vegastoothdr.com/
I made two divs that when I scroll down ; images can move at the same time.
I used a position:fixed tag.
Now the 1st image is scrolling down, but the 2nd is not.
When I use position:fixed tag for the 2nd image div, then that becomes part of 1st image.
How can I resolve this issue?
I want when I scroll down both images should scroll down from left and right - towards down position.
Get results on my site: Sagifill.com
Code:
<div style="width: 1300px; margin-left:auto; margin-right:auto;">
<div style="float:left; padding:0px 5px 0px 5px; position:fixed;">
<a href="anrdoezrs.net/click-7588066-11740922"; target="_top">
<img src="lduhtrp.net/image-7588066-11740922"; width="160" height="600" alt="" border="0"/></a>
</div>
<div style="float:right; padding:0px 5px 0px 5px; ">
<a href="anrdoezrs.net/click-7588066-11740922"; target="_top">
<img src="lduhtrp.net/image-7588066-11740922"; width="160" height="600" alt="" border="0"/></a>
</div> </div>
You don't need to float them with position:fixed. Try this:
<div style="padding:0px 5px; position:fixed; left: 0; top: 0;">
<a href="anrdoezrs.net/click-7588066-11740922"; target="_top">
<img src="lduhtrp.net/image-7588066-11740922"; width="160" height="600" alt="" border="0"/>
</a>
</div>
<div style="padding:0px 5px; position: fixed; right: 0; top: 0;">
<a href="anrdoezrs.net/click-7588066-11740922"; target="_top">
<img src="lduhtrp.net/image-7588066-11740922"; width="160" height="600" alt="" border="0"/>
</a>
</div>
I have an image gallery. The thumbnails are 240px in width, but the heights vary. I tried cropping the images so that they are all 150 pixels high.
At the moment I've got this:
HTML
<div data-category="category1">
<a href="image1.jpg" rel="lightbox[on]" title="">
<img src="image1.jpg" width="" height="" />
</a></div>
<div data-category="category1">
<a href="image2.jpg" rel="lightbox[on]" title="">
<img src="image2.jpg" width="" height="" />
</a></div>
<div data-category="category1">
<a href="image3.jpg" rel="lightbox[on]" title="">
<img src="image3.jpg" width="" height="" />
</a></div>
<div data-category="category2">
<a href="image4.jpg" rel="lightbox[on]" title="">
<img src="image4.jpg" width="" height="" />
</a></div>
<div data-category="category2">
<a href="image5.jpg" rel="lightbox[on]" title="">
<img src="image5.jpg" width="" height="" />
</a></div>
<div data-category="category2">
<a href="image6.jpg" rel="lightbox[on]" title="">
<img src="image6.jpg" width="" height="" />
</a></div>
CSS
.gallery {
position:relative;
}
.gallery > div {
position:absolute;
}
.gallery > div > a > img {
position:absolute;
top: 0;
left: 0;
clip: rect(0px,240px,150px,0px);
overflow: hidden;
border:none;
}
This works with cropping the images to 150px, but only the images on the top row are aligned. The images on the other rows are not aligned because they are being placed directly below the original heights of the images on the row above. (The cropping doesn't get rid of the rest of the image. The rest of the image is not visible, but it's still there,). What do I need to add to my CSS to sort this out?
Surely your code is a bit more complex of what you paste here, but please take in consideration this base css:
.gallery { position: relative; }
.gallery > div { float: left; }
.gallery > div > a { max-height: 150px; width: 240px; overflow: hidden; display: inline-block; }
.gallery > div > a > img { border: none; }
Here a working example:
http://jsfiddle.net/3W7Xt/
Regards