I have some images in the footer, wrapped in tags. For some reason they are not working whatsoever... I am totally lost.
website is HERE
any help would be great (footer is on every single page on the site)
relevant html:
<div class="socialLinks">
<div class="footerTitle">Follow Us At</div>
<div class="iconsContainer">
<a href="https://www.facebook.com/NewWaveAcademyMMA/">
<img class="socialicon" src="../images/fb.svg">
</a>
<a href="https://twitter.com/NewWaveMMA?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">
<img class="socialicon" src="../images/twit.svg">
</a>
<a href="https://www.instagram.com/newwaveacademymma/">
<img class="socialicon" src="../images/insta.svg"></a>
</div>
</div>
Your .footercopyright div is overlapping the rest of your footer.
Since you're using floats to align the .affiliations and .sociallinks divs, you should wrap them in a clearfix. This will clear your floats and prevent your copyright div from expanding to fill the space.
<div class="footerbox">
<div class="clearfix">
<div class="affiliations"></div>
<div class="socialLinks"></div>
</div>
<div class="footercopyright"></div>
<div>
.clearfix:after {
content: "";
display: table;
clear: both;
}
The links on your webpage are working. You are unable to click on the links because you have placed a div over your links. Actually, you are clicking this div, not the links. This is the div (look it up in the browser console):
<div class="footercopyright">Copyright, All Rights Reserved NWA 2018</div>
You may resolve this by either removing this div, or by setting a higher z-index for the links container.
you can add clear in below class and work.
Also, noticed small dotted below links::
You use display:inline-block; on <a> to remove this
`.footercopyright {
position: relative;
color: #232528;
max-width: 100%;
font-size: 10pt;
text-align: center;
padding: 5px 0px;
clear: both;
}`
Related
What I want
I am trying to create a navigation bar for a mobile site. I want a dark blue navigation div to house a menu button and a search form.
What I get
My wrapper div just appears as a thin dark blue line and the navigation divs within just exist outside of the wrapper.
The code
<div id="mobileNavBar">
<div style="float:left;width:20%">
<span class="menu-trigger"><i class="fas fa-bars menuFA fa-2x"></i>
</span>
</div>
<div style="float:right;width:80%">
<?php get_search_form(); ?>
</div>
<div style="clear:both"></div>
</div>
Here is CSS for the navigation div
#mobileNavBar{
background-color: #4d94ff;
border:1px solid #4d94ff;
height:auto;
}
The image
Below is an image of my mobile site, ignore the large black boxes, that's just me hiding content. There's actually a logo there and written content.
As you can see, my navigation div is a thin darker blue line and the navigation contents are underneath.
What I tried
Well after looking at similar questions on this website, I was led to believe that the issue is that my elements are floating and therefore I need to add:
<div style="clear:both"></div>
However this doesn't seem to have an impact.
How, could I get the navigation div to wrap itself around the image for the menu and the search bar? Or rather, how do I get a div to wrap around floating divs?
There is a CSS hack for clearing all your internal floats.
Add class "clearfix" to your div:
<div id="mobileNavBar" class="clearfix">
<div style="float:left;width:20%">
<span class="menu-trigger"><i class="fas fa-bars menuFA fa-2x"></i>
</span>
</div>
<div style="float:right;width:80%">
<?php get_search_form(); ?>
</div>
<div style="clear:both"></div>
</div>
CSS code:
.clearfix {
overflow: auto;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
So, this will clear all the floats inside an existing div.
You could have created style with your div id 'mobileNavBar' as well but it is better to create a reusable class.
Please check https://www.w3schools.com/howto/howto_css_clearfix.asp for more clarity.
Floats can be tricky. Can you use flexbox?
display:flex will make this simpler :)
css:
#mobileNavBar {
background-color: #4d94ff;
border: 1px solid #4d94ff;
display: flex;
}
html:
<div id="mobileNavBar">
<div style="width:20%;">
<span class="menu-trigger"><i class="fas fa-bars menuFA fa-2x">first div</i></span>
</div>
<div style="width:80%">
second div
</div>
</div>
* markup for outline and padding not shown
Apply following class to floated elements parent.
.clear:after{
content: ' ';
display: table;
clear: both
}
Or you can add extra element in HTML
<div>
<div style="float: left;">Sidebar</div>
<div style="float: right;">Content</div>
<div style="clear: both;"></div><!-- Clear the float -->
</div>
above solution solve your problem but my opinion is you can use flex to grid for this kind of layout.
So I have the following structure:
<div id="bannerLogin" class="topBannerAnon">
<a href="http://www.redacted.fr/" class="logo" target="_blank">
<img src="redacted" style="border:none;">
</a>
</div>
With no CSS, the containing div extends to the image height, which is on the left side of the div.
Now I want to put that image on the right of the div instead of the natural left. If I use float: right; on the .logo class, the <a> element is taken out of the flow so my containing div won't extend to the picture height anymore (it will have a height=0).
I tried to wrap the <a> element into another div and give the logo class to it (in case it needs to be a block element), but same behaviour.
So I'm realizing I have no idea how to attach an element on the right of its container, with the container still taking into account the dimensions of said element. Is it possible?
You're doing fine, you just need a clearing element before you close your container in order to make the floated elements "occupy" the parent's space. Something like this should work:
<div id="bannerLogin" class="topBannerAnon">
<a href="http://www.redacted.fr/" class="logo" target="_blank">
<img src="redacted" style="border:none;">
</a>
<div class="clear"></div>
</div>
CSS
.clear {clear: both;}
In case of images, you can use the traditional html align="right" tag to put the image on right side of the content and keep the other aspects of styling the same.
The align="right" tag goes in the IMG html element.
Given this CSS:
.logo {
float: right;
}
… you can get the div to grow by adding this CSS:
#bannerLogin {
overflow: hidden;
}
That's due to the fact that an overflow with a value different from visible creates a new block formatting context.
Snippet
#bannerLogin {
background: #fed;
border: 1px solid black;
overflow: hidden;
}
.logo {
float: right;
}
<div id="bannerLogin" class="topBannerAnon">
<a href="http://www.redacted.fr/" class="logo" target="_blank">
<img src="http://placehold.it/100x100" style="border:none;">
</a>
</div>
Hey I have a problem with social buttons. I am trying to move them but only one show up on my page and I can't move that. I have three buttons and them images can someone help I am trying to put them straight line center of header or above my video.And I want to put them links.
HTML
<body>
<div id="header">
<div id="icons>
<img src="facebook-64.png">
<img src="twitter-64.png">
<img src="instagram-64.png">
</div>
<img src="logo2.png">
<div id="nav">
<div id="nav_wrapper">
CSS
img {
position: absolute;
right: 640px;
top: -50px;
}
video {
margin-top: 250px;
}
#icons {
top: -220px;
}
If using absolute positioning. Each button needs a different class. It is best practice to use classes for css styling and keep id for targeting elements with JavaScript. The images need to be wrapped in links ( tags) and the # in the href below should be set to the URL of your facebook, twitter and instagram home pages.
Personally I would set out html as:
<body>
<div class="header">
<div class="icons>
<a class="fb-link" href"#">
<img src="facebook-64.png">
</a>
<a class="twr-link" href"#">
<img src="twitter-64.png">
</a>
<a class="inst-link" href"#">
<img src="instagram-64.png">
</a>
</div>
<img src="logo2.png">
<div id="nav">
<div id="nav_wrapper">
Rather than use absolute positioning I would simply display the links as blocks and float them left. Use a margin on the containing div to position your icons. See below.
css
.icons{
margin:20px auto; //gives margin of 20px top and bottom and centers buttons horizontally.
width:220px;
}
.fb-link, .twr-link, .inst-link {
display:block;
float:left;
width:60px; //set width to the with of image used eg 64px
margin-left:20px;
}
.fb-link{
margin-left:0; //if margin left was left at 20px the icons would be 20px off center.
}
Using these principles laying out the rest of you pages should be straight forward.
You're giving the same style to all img tags, causing them to overlap! try changing positions for each
I have div which includes:
<div class="field-content">
<a href="http://url.com">
<img width="320" height="194" src="http://img.jpg"></img>
<div class="tile_content">
<div class="tile_title">content</div>
<div class="tile_body">content</div>
</div>
</a>
</div>
In some cases this field-content has not img-tag at all. Then I want tile_content to be vertically centered to field-content.
When img-tag exists then image is positioned at top of field-content and tile_content is under image.
This demonstrates those two situations. In first one there is image and under image tile_content. In second one there is only tile_content - no img at all.
Any ideas/tips how to make this work?
My CSS:
.field-content {
margin: 0px 0px 15px;
height: 365px;
width: 320px;
display: block;
overflow: hidden;
float: left;
background-color: #FFF;
.tile_content {
}
The only Thing you Need to know is vertical centering of div. This Problem is already solved here:
How to vertically center a div for all browsers?
You can add class has-image to .field-content do you can define own Styles for block with Image and without it. For example:
<div class="field-content has-image">
<a href="http://url.com">
<img width="320" height="194" src="http://img.jpg"></img>
<div class="tile_content">
<div class="tile_title">content</div>
<div class="tile_body">content</div>
</div>
</a>
</div>
So your CSS Looks like
.field-content.has-image {
}
If I got your question correct, then simply,
Put that img tag inside a div, give that div the same height as that you have given for image, so, it won't matter if the image is inside that div or not. it will always appear as a block, so won't collapse
OK, first time, I took it other way, I thought there are 3 divs, Sorry for that.
Here is the fiddle link:
enter code here
http://jsfiddle.net/happy2deepak/6U3kw/1/
I don't really understand why my float: right; div is below container div. I have no idea how to fix this. Can someone please explain? I had this problem long time ago on another website, but totally forgot how I managed to fix it if I did it at all. I want it to be inside the container of course.
<div id="menu">
<div class="categories"></div>
<img class="logo" src="#" />
<div class="thumb"></div>
</div>
-
#menu
{
width: 960px;
height: 70px;
margin: auto;
background-color: blue;
}
#menu .thumb
{
background-color: aqua;
float: right;
height: 60px;
width: 400px;
}
You should read this web page: https://css-tricks.com/all-about-floats/
The most important part is this:
The Great Collapse
One of the more bewildering things about working with floats is how they can affect the element that contains them (their "parent" element). If this parent element contained nothing but floated elements, the height of it would literally collapse to nothing.
You can usually fix this by adding a "clearing" div at the end of your container, like this:
<div id="menu">
<div class="categories"></div>
<img class="logo" src="#" />
<div class="thumb"></div>
<div style="clear: both;"></div>
</div>
When you float an element, it loses all height. Therefore, the container does not know to expand to contain it. You must give the container a height large enough to contain the floated element.
Alternately, you can include a clearing div just below your floated element. This is the "so-called" clearfix, and will force the container to contain the floated element as expected.
To add a clearing div, you can add the following to your markup:
<div class="thumb"></div>
<div class="clearfix"> </div> <!-- Add this line -->
</div>
and in your CSS:
.clearfix {
clear: both;
font-size: 1px;
}
float: right; will move the element to the right of the non-floating elements after it (I am talking about HTML markup). See if this works:
<div id="menu">
<div class="thumb"></div>
<div class="categories"></div>
<img class="logo" src="#" />
</div>
Use floats for all your main divs, and have overflow: hidden for your #container