Webpage CSS Suddenly Displaying Wrong on Certain Pages - html

I have a template applied to multiple pages on my website, including the About section. This section has three pages and the layout is the same for each page. The template isn't working correctly on two pages, about2.html and about1.html. Oddly, it works perfectly for about3.html
Previously these two pages worked fine on all browsers I viewed it on, and only recently did I notice it stopped displaying correctly, even though I didn't touch the template or CSS.
Here's one of the pages:
http://thehummingbirdplace.com/about2.html
I've tried rearranging different elements, disabling certain CSS, and deleting sections all together but it doesn't fix the page. When I delete the whole .adRight section or disable the float on it, the text moves back to the the top, but the menu tabs don't line up right. I honestly am not sure what's at the root of the problem, so I can't provide specific code here to focus on.

The css inside about1.html and about2.html should look like this
<style style="text/css">
img { padding-top: 0px; padding-right: 15px; padding-bottom: 15px; padding-left: 0px; }
#text { width: 850px; margin-left: auto; margin-right: auto; }
.img-left { flaot:left; }
.img-right { flaot:right; }
</style>
Next, you may clear these divs having class clear on both files - you don't need them, or at least change your .clear class to this, .clear { clear: both; }
<div id="header"><!-- ... --></div>
<div id="adLeft"><!-- ... --></div>
<div class="clear"></div> <!-- take this off -->
<div id="adRight"><!-- ... --></div>
<div class="clear"></div> <!-- take this off -->
<div id="content1"><!-- ... --></div>
<div id="footerLine1"></div>
<div id="footer"><!-- ... --></div>
Change the only img element inside the text block in about1.html to this
<img src="_images/Donna4.png" width="197" height="193" alt="Donna Wright" class="img-left" />
Change the only img element inside the text block in about2.html to this
<img src="_images/hummingbirdLogo.png" width="208" height="145" alt="The Hummingbird Place Logo" class="img-right;">

Related

Footer Blocking Website Content

Description:
I'm having an issue with my website's footer blocking content on mobile browsers (and on longer pages on desktops).
I've seen threads about this before, but these focus on hiding the footer until the user scrolls all the way down. I want to have the footer "float" below the content, but have it go below the content when the user scrolls all the way down the page. I also need this to allow clicking on items right above the footer. On my site, you can't click on a button, even if it's a few lines above the footer - which needs to also be fixed.
Examples:
You can view an example of this issue at my own site: http://mbt.aeio.io/twitter.php
Note that when you scroll all the way down, it is impossible to click "Load More Tweets", even on desktops, where the button is clearly visible.
I cannot find an example of what I'm trying to accomplish; that's why I'm posting about this -- and not just copying someone else's code.
Code:
This is my code for ARRANGING the footer:
<head>
<style type ="text/css" >
.footer{
position: fixed;
text-align: center;
bottom: 0px;
width: 100%;
}
</style>
</head>
This is my ACTUAL code for the footer:
<div class="footer">
<div class="content">
<div class="container" style="
/* display: inline-block; */
">
<div class="well animated slideInUp" style="
display: inline-block;
">
<center>Developed with <span class="glyphicon glyphicon-heart" aria-hidden="true"></span> by mario_bros_tech, Arkagaen, and Others | Copyright © 2015-2017 | All Rights Reserved</center>
</div>
</div>
</div>
</div>
I know this is super-janky and that I shouldn't be using containers to make a footer, so if you have any suggestions for improving/cleaning up the code too, that would also be appreciated.
And if you need to look at the CSS for whatever reason, it is using Bootstrap and can be found here: http://mbt.aeio.io/assets/css/
Thanks for all the help!
The best thing (and the right thing) to do is to give some bottom padding to body. Giving the following code:
body {
background: #eee;
padding-bottom: 75px;
}
We get this:

html/css floating image right of text

I am attempting to float an image to the right of some text currently wrapped in the P tag inside a parent div. using float: right for the image takes it all the way to the right but under the text.
I would like to see them aligned side by side, please check screenshot here:
https://drive.google.com/file/d/0B3STRGf0b16iNWhMVDBETEpaczQ/view?usp=drivesdk
My css
h1 {
font-family: 'open sans';
font-size: 35px;
font-weight: 200;
padding: 0;
margin: 0;
}
p {
max-width: 550px;
padding: 0;
margin-top: 15px;
font-size: .9em;
line-height: 1.8em;
}
.why-nexishost {
width: 980px;
overflow: hidden;
margin: 70px auto 0 auto;
background-color: #f2f2f2;
}
.quality-badge {
float: right;
}
My html
<head>
<title>NexisHost</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="header">
<div class="header-content">
<img src="images/twitter-icon.png" class="twitter-icon" alt="Twitter icon">
<ul>
<li>Support 513.571.7809</li>
<li>Account Manager</li>
</ul>
</div>
<div class="navigation">
<img src="images/logo.png" alt="Site Logo">
<ul>
<li>Products</li>
<li>Domains</li>
<li>Services</li>
<li>Something</li>
<li>Design</li>
<li>Support</li>
<li>Signup</li>
</ul>
</div>
<div class="home-banner"></div>
<div class="why-nexishost">
<h1>Quality is our #1 priority</h1>
<p>A domain name, your address on the Internet, says a lot about who you are and what you do. New domain endings like .guru and .photography can help you find a meaningful address that stands out on the web. Every domain includes website forwarding, email forwarding (help#your_company), simple management tools and other helpful features.</p><img src="images/premium_quality-01-256.png" class="quality-badge" alt="Quality Guarantee badge">
</div>
</div>
</body>
</html>
Try adding this:
p{
display: inline-block;
}
.quality-badge{
display: inline-block;
}
You can also do this by floating left as another person suggested, but inline-blocks will put things in a line.
You can check this site out for more info.
I'm not sure what is considered better-practice, I think inline-blocks are just the newer way of doing things although old versions of some browsers may not support it. This site shows which don't.
You probably want to float your <p> left, not your image right.
p {
float: left;
...
}
.quality-badge {
//float: right;
}
You can do it like this with your current css:
<div class="why-nexishost">
<img src="images/premium_quality-01-256.png" class="quality-badge" alt="Quality Guarantee badge">
<h1>Quality is our #1 priority</h1>
<p>A domain name, your address on the Internet, says a lot about who you are and what you do. New domain endings like .guru and .photography can help you find a meaningful address that stands out on the web. Every domain includes website forwarding, email forwarding (help#your_company), simple management tools and other helpful features.</p>
</div>
You'll probably want to keep float:right applied to your image. This will make your image float to the right and HTML elements that come after it in the same container will wrap around it. However, you'll need to move your img tag up so it comes before the text you want to wrap.
HTML:
<div class="container">
<img src="myImage.png" class="myImage" alt="Alt Text" />
<h1>Heading</h1>
<p>Paragraph text</p>
</div>
CSS:
.myImage {
float:left;
}
See this fiddle using your code for a demonstration.
If you want the container to expand to the size of the floating image (by default if the image is bigger than the container it overflows out) you can add the following CSS to your container class:
.container { overflow: auto; }
As an additional note, your img tags aren't closed (you have <img src="source" > rather than <img src="source" /> which will probably cause rendering errors in at least some browsers.
You can learn more about float and clear in CSS here.

Yotpo <div> widget center

Im using a widget by Yotpo on my website and would like to center it.
Its located in a product-list.tpl so i thought that product-list.css should be the css to speak with the div.
<div class="yotpo bottomLine"
data-appkey="{$yotpoAppkey}"
data-domain="{$yotpoDomain}"
data-product-id="{$product.id_product}"
data-product-models=""
data-name="{$product.name|escape:'htmlall':'UTF-8'}"
data-url="{$product.link|escape:'htmlall':'UTF-8'}"
data-image-url="{$link->getImageLink($product.link_rewrite, $product.id_image, '')}"
data-description="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}"
data-lang="{$yotpoLanguage|escape:'htmlall':'UTF-8'}"
data-bread-crumbs="">
</div>
I did try this one:
.yotpo_bottomline .{
text-align: center!important;
}
But that didnt realy worked.
I have used in-line styling to solve the issue in our collection pages on Shopify.
Use the following code in the <div> preceeding the main data calls from Yopto.
The padding is optional but adds a small gap from the element above.
<div style="margin: auto; width: 50%; padding: 5px;" class="yotpo bottomLine"

CSS - How can I center a <script>'s output?

I've been having a lot of trouble trying to center an external script and I was hoping SO could help me out. I'm designing a page to use a Google widget that uses Google Maps to give directions to an office. Here is my code:
<asp:Content ID="Content1" ContentPlaceHolderID="page_content" runat="server">
<div class="centered">
<span class="header_large_bold">Directions to our office:</span><br /><br />
<span class="header_bold">Please type your address in the top bar and click "Go".</span><br />
<script src="[link to the widget here]"</script>
</div>
</asp:Content>
And here is the CSS for it:
.centered {
width: 100%;
margin: 0 auto;
text-align: center;
}
As it is, the text is centered perfectly fine, but the widget from the is left aligned. I can fix this using a tag, but I'm trying to avoid using it as best I can. Any idea what I'm doing wrong?
You can insert the tag in a div
<div id="parent">
<script src='...'></script>
</div>
and then center the div..
#parent {
width: 30%;
margin: 0 auto;
}
But it might depend on the script content
Easily put your code between
<div align=center>
and
</div>
:)
User fa7d0 has the exact solution, but maybe a little unclear for the beginner:
Step 1 - Use a div with a "parent" ID to encapsulate your script as follows:
<div id="parent">
<script src='...'></script>
</div>
Step 2 - Go up to the top of your code, probably inside the area where you are defining the header information, and in the style section place the definitions:
<style>
#parent {
width: 30%;
margin: 0 auto;
}
</style>
I find it helpful to put all the div styling stuff in one area, all the p styling stuff in one area, etc.

right align an image using CSS HTML

How can I right-align an image using CSS.
I do not want the text to wrap-around the image. I want the right aligned image to be on a line by itself.
<img style="float: right;" alt="" src="http://example.com/image.png" />
<div style="clear: right">
...text...
</div>
jsFiddle.
img {
display: block;
margin-left: auto;
}
Float the image right, which will at first cause your text to wrap around it.
Then whatever the very next element is, set it to { clear: right; } and everything will stop wrapping around the image.
There are a few different ways to do this but following is a quick sample of one way.
<img src="yourimage.jpg" style="float:right" /><div style="clear:both">Your text here.</div>
I used inline styles for this sample but you can easily place these in a stylesheet and reference the class or id.
To make the image move right:
float: right;
To make the text not wrapped:
clear: right;
For best practice, put the css code in your stylesheets file. Once you add more code, it will look messy and hard to edit.
My workaround for this issue was to set display: inline to the image element.
With this, your image and text will be aligned to the right if you set text-align: right from a parent container.
Easier / more organized way to do this is with some css.
CSS Above, HTML below with the snippet.
div {
clear: right;
}
/*
img {
float:right
}*/
/* img part is unneeded unless you want it to be a image on the right the whole time */
<html>
<!-- i am using an image from my website as a quick example-->
<img src="https://raw.githubusercontent.com/ksIsCute/GtGraffiti/gh-pages/icon.ico" alt="my image!" style=float:right>
<div>My Text Here</div>
<!-- Text goes below the image, and not beside it.-->
<img src="https://raw.githubusercontent.com/ksIsCute/GtGraffiti/gh-pages/icon.ico" alt="my image!" style=float:right>
<div>
<h1> I support headers! </h1>
<blockquote> And blockquotes!! </blockquote>
and hyperlinks!
</div>
<!-- THE CODE BELOW HERE IS **NOT** NEEDED!! (except for the </html>) -->
<h2 style="text-align:center;color:Grey;font-family:verdana"> Honestly I hope this helped you, if there is any error to my work please feel free to tell me. </h2>
</html>