I created a webpage with a dynamic footer. In the footer I have a facebook icon. when I preview the page the image does not appear. All other css files are working fine except for the footer. Could anyone tell me what I am missing?
My footer template:
<footer>
<div class="icon-text">
<div class="icon-text-text">
<ul class="footer-nav">
<li>Terms and Conditions</li>
<li>Shipping Information</li>
</ul>
</div>
</div>
<div class="icon-text">
<p class="email_text">Follow me on</p>
<a href="#">
<img class="social-icon" src=../icons/facebook.png"
alt="Facebook">
</a>
</footer>
<footer class="second">
<p>© All Rights Reserved</p>
</footer>
<!--End of Footer Section-->
Here is my css for the footer section:
footer {
background-color: pink;
border: 2px solid black;
box-shadow: 5px 5px 3px rgba(0, 0, 0, .65);
width: 1350px;
max-height: 300px;
overflow: hidden;
}
.icon-text {
width: 50%;
float: left;
text-align: justify;
text-align: center;
}
.icon-text-text {
font-size: 150%;
}
img.social-icon {
height: 45px;
width: 45px;
}
.email_text {
font-size: 150%;
}
And here in the php on the index page to add the footer:
<?php include_once("templates/template_footer.php"); ?>
There are other things wrong with the footer like I can't get the wording to move to the left but the image is whats important. Any ideas on how to fix this?
Assuming your path was correct, Please check it out.
<link rel="stylesheet" type="text/css" href="<?php include_once('templates/template_footer.php'); ?>">
Related
I've tried everything I know to make the height of the black part change according to the "samples" in the picture above. Whenever I add new "sample" that will go down the black part does not follow. Is there something wrong in my code, if there is please let understand how to fix it cause Im new at this.
Here is my code:
body,
html,
.yourteachers,
.fullpage
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.fullpage
{
background-color: black;
}
.leftForm
{
background-color: #2c384a;
width: 204px;
height: 100%;
float: left;
font-family: calibri;
color: white;
text-align: center;
}
.yourteachers
{
text-align: center;
}
.announcementSlider
{
background-color: #323f4f;
color: white;
font-size: 24px;
height: 280px;
width: 200px;
margin: 20px;
display: inline-block;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/teachers.css">
</head>
<body>
<header>
<nav>
<div class="nav-wrapper blue">
<div class="container">
Teachers
<i class="material-icons">menu</i>
<ul class="hide-on-med-and-down right">
<li><a id="dashb">Home</a></li>
<li><a id="logout">Log Out</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="fullpage">
<div class="leftForm hide-on-med-and-down">
<img src="pictures/default-avatar-250x250.png">
<p class="name">
<?php echo $name; ?>
</p>
<p class="section">
<?php echo $grade; ?>-
<?php echo $section; ?>
</p>
</div>
<div class="leftForm sidenav blue center" id="slide_out">
<img src="pictures/default-avatar-250x250.png">
<p class="name">
<?php echo $name; ?>
</p>
<p class="section">
<?php echo $grade; ?>-
<?php echo $section; ?>
</p>
</div>
<div class="yourteachers">
<?php
while ($row = mysqli_fetch_array($query)) {
echo '<a class="announcementSlider" href="teacherinfo.php?id=' . $row['IDNum'] . '">
<img src="pictures/blank photo.png" class="teacherpic"><br>
<span>'.$row['LastName'].'</span><br>
<span>'.$row['Grade'].' - </span>
<span>'.$row['Section'].'</span>
</a>';
}
?>
</div>
</div>
<script type="text/javascript">
var a = document.getElementsByClassName("announcementSlider");
for (i = 0; i < a.length; i++) {
a[i].onclick = function() {
location.href = "teacherinfo.php";
};
}
</script>
<script src="js/teachers.js"></script>
<script src="sameFunctions.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
const slide_menu = document.querySelectorAll(".sidenav");
M.Sidenav.init(slide_menu, {});
</script>
<footer>
<div class="foot">
<div class="socialMed">
</div>
</div>
</footer>
</body>
</html>
It's because your .fullpage needs to follow .yourteachers 's height. And your .leftForm has float: left but it's parent (.fullpage) still doesn't know the exact height of it's children. To fix it, you need to add clear: both by using div with additional .clearboth class or css :before or :after pseudo-selector.
see my fiddle here
In my approach above, I'm using fixed sidebar and add margin-left on .yourteachers to fix sidebar height issue. For better implementation, I recommend you to use flex box so you keep your sidebar not using fixed position.
<!-- language-all: lang-css -->
body, html, .yourteachers, .fullpage {
margin: 0;
padding: 0;
}
body, html {
width: 100%;
height: 100%;
background: black;
}
.fullpage {
overflow: hidden
}
.leftForm{
background-color: #2c384a;
width: 204px;
height: 100%;
float: left;
font-family: calibri;
color: white;
text-align: center;
}
.yourteachers{
text-align: center;
}
.announcementSlider{
background-color: #323f4f;
color: white;
font-size: 24px;
height: 280px;
width: 200px;
margin: 20px;
display: inline-block;
}
Have u tried height: 100vh? Height is automatically adjusting, so just height: 100% means 100% height of parent.
I'm currently building a site on Wordpress using the html5blank as the parent theme. I've built all the front-end text pages on HTMl/CSS. When I've transferred all the files over a lot of the styling has broken - I've fixed the majority of it but there's one section that I cannot fix. This is how it should look -
And this is how it looks in the Wordpress site -
When I've inspected the site via developer tools it seems as though these rules are not being applied -
.agencyproducts {
position: relative;
display: inline-block;
text-align: center;
}
Also, the row in the front-end site is applying a height rule but not in the wordpress site. I've looked at applying specificity rules and !important but nothing (this also disrupts other styling rules on other parts of the site). I'm really stuck on this and would appreciate any assistance.
Here's the full code for the section -
section#products {
height: 800px;
max-width: 100%
}
.agencyproducts {
position: relative;
display: inline-block;
text-align: center;
}
.agencyproducts p {
text-align: center;
margin: 30px;
}
.agencyproducts img {
width: 70px;
height: 70px;
position: relative;
line-height: 1;
top: 50%;
}
figure {
text-align: center;
display: inline-block;
max-width: 80px;
height: 100px;
vertical-align: top;
margin: 5px;
font-size: 9px;
margin-bottom: 60px;
}
figure img {
padding-bottom: 5px;
}
.four {
padding: 0;
margin: 0;
border: 0;
}
.images {
margin-top: 30px;
border-bottom: 10px;
}
.images img {
margin-left: 20px;
padding: 10px;
}
.chevron {
height: 150px;
}
.chevron figcaption {
margin-top: 20px;
font-size: 13px;
color: #d3d3d3;
}
hr.hragency {
display: block;
width: 250px;
margin-top: 0em;
margin-bottom: 0em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
border-color: #F0F0F0;
}
<section id="products">
<div class="container">
<div class="row">
<div class="twelve columns agencyproducts">
<p>WHAT PRODUCT ARE YOU INTERESTED IN?</p>
<a href="2k4kproduction.html">
<figure>
<img src="images/production.png" alt="Production">
<figcaption>2K / 4K PRODUCTION</figcaption>
</figure>
</a>
<a href="postproduction.html">
<figure>
<img src="images/post-production.png" alt="Post-Production">
<figcaption>POST PRODUCTION</figcaption>
</figure>
</a>
<a href="2d3danimation.html">
<figure>
<img src="images/animation.png" alt="Animation">
<figcaption>2D / 3D ANIMATION</figcaption>
</figure>
</a>
<a href="adhoc.html"><figure>
<img src="images/ADHOC.png" alt="ADHOC">
<figcaption>ADHOC</figcaption>
</figure>
</a>
<a href="interactive.html">
<figure>
<img src="images/interactive.png" alt="Interactive">
<figcaption>INTERACTIVE & PERSONALISED</figcaption>
</figure>
</a>
<a href="tvadverts.html">
<figure>
<img src="images/tv-adverts.png" alt="TV ADVERTS">
<figcaption>TV ADVERTS</figcaption>
</figure>
</a>
<a href="360video.html"><figure>
<img src="images/360.png" alt="360 Video and VR">
<figcaption>360 VIDEO & VIRTUAL REALITY</figcaption>
</figure>
</a>
</div>
</div>
<hr class="hragency">
<div class="row">
<div class="images">
<div class="four columns">
<img src="images/VIDEO.jpg" alt="Video">
<img src="images/blog.jpg" alt="blog">
</div>
<div class="four columns">
<img src="images/faq.jpg" alt="FAQ">
<img src="images/VIDEO.jpg" alt="Video">
</div>
<div class="four columns">
<img src="images/blog.jpg" alt="blog">
<img src="images/faq.jpg" alt="FAQ">
</div>
</div>
</div>
</div>
</section>
<section class="chevron">
<div class="container">
<div class="row">
<figure>
<figcaption>SEE MORE</figcaption>
<i class="fa fa-chevron-circle-down fa-3x" aria-hidden="true"></i>
</figure>
</div>
</div>
</section>
Try this:
.agencyproducts{
width:100%;
text-align:center;
}
.agencyproducts a{
display:inline-block;
}
Because container .agencyproducts need to have text-align:center and first childs of it must be displayed as inline-block ... then they will display properly. You only set child of a tag as display:inline-block but do not tell CSS how it should treat it parent.
With what I understood try appending !important to your custom css properties so as to override any pre-existing style properties.
height: 150px !important;
Despite of other people having the same issues I still couldn't get it to work, so I'll really need your help.
I'm currently writing a guestbook in php with a html-template but I have the issue that my divs don't use the min-height properties that I set if they are a percentage. I wanted to make the whole page responsive for all resolutions and window-sizes so that's why I'm trying to avoid fixed heights.
The following is my html-markup:
<!DOCTYPE html>
<html>
<head>
<link href="<?=$dir_stylesheetFile?>" type="text/css" rel="stylesheet">
<title><?=$GuestbookTitle ?></title>
</head>
<body>
<div id="wrap_main">
<div class="menubar">
<ul class="menubar_list">
<a href="http://wikitest.gutknecht-informatik.com"> <!-- Home should always exist,
other menubar-items can be added in MenubarHandler.php > InternLink or ExternLink -->
<li class="menubar_item" id="int"><span id="menubar_text">Home</span></li>
</a>
<?=$MenuPagesString ?>
</ul>
<?=$MenuPagesStringExt ?>
</div> <!-- menubar -->
<div id="wrap_header">
<div id="logoplacer">
<a href="http://wikitest.gutknecht-informatik.com">
<img id="img_logo" src="/../data/images/Logo_Guestbook.png" alt="Guestsbook Home"/>
</a>
</div> <!-- logoplacer -->
<div id="profileplacer">
<?= $ProfilePlacer ?>
</div> <!-- profileplacer -->
</div> <!-- wrap_header -->
<div id="wrap_content">
<div id="content">
<div id="content_title">
<h2><?=$CurrContentTitle ?></h2>
</div> <!-- content_title -->
<div id="content_text">
<?=$CurrContentText ?>
</div> <!-- content_text -->
</div> <!-- content -->
</div> <!-- wrap_content -->
<div id="wrap_footer">
© by Kathara
</div> <!-- wrap_footer -->
</div> <!-- wrap_main -->
</body>
</html>
As my CSS-file is quite big I will only give you the important parts:
*{
font-family:sans-serif;
font-size:12pt;
color:white; /*003300*/
padding: 0;
margin: 0;
list-style: none;
}
html {
position: absolute;
background-image: url('/../data/images/03.jpg');
background-attachment: fixed;
min-height:100%;
width:100%;
}
body {
height:100%;
width:calc(70% - 2px);
margin-left: calc((30% - 2px) / 2);
position: absolute;
}
#wrap_main {
background: rgba(255,255,255,0.7);
width: 100%;
min-height: 100%;
}
#wrap_content {
display: inline-block;
position: relative;
left: 190px;
margin-top: calc(1% + 4px);
width: calc(100% - 200px);
background: #1e1e1e;
min-height: 100%;
margin-bottom: 10px;
}
#content{
position: relative;
color: white;
margin: 5px auto 10px;
height: 100%;
min-height: 550px;
width: 95%;
}
If you need more parts, please write so in the comment. I'm sorry if the code is a little messy but I haven't yet cleaned it up...
My problem is, that the #wrap_content and #content can't have a percentage height and I don't know why but it just won't work.
Did I make a mistake somewhere along the way and just don't see it?
What do I need to change, so that the #wrap_main is always as big as it's content? How can I get my #content (or #wrap_content) to adapt to the height of the content (including text and images)?
Do I need to change something in the html-markup?
If you see anything else that I could do better, please advise. I'm still very new to php, html and css but I'll welcome every help I can get. Thanks in advance.
If you want to check out what the page looks like at the moment click here. Be aware that not everything is working correctly yet, but if you want to register yourself, you're highly welcome to test it out.
EDIT:
I had to change the html-markup a little and adapted the css quite a bit thanks to the idea of William, thanks again:
<!DOCTYPE html>
<html>
<head>
<link href="<?=$dir_stylesheetFile?>" type="text/css" rel="stylesheet">
<title><?=$GuestbookTitle ?></title>
</head>
<body>
<div id="whity_layer">
<div id="wrap_main">
<div class="menubar">
<ul class="menubar_list">
<a href="http://wikitest.gutknecht-informatik.com"> <!-- Home should always exist,
other menubar-items can be added in MenubarHandler.php > InternLink or ExternLink -->
<li class="menubar_item" id="int"><span id="menubar_text">Home</span></li>
</a>
<?=$MenuPagesString ?>
</ul>
<?=$MenuPagesStringExt ?>
</div> <!-- menubar -->
<div id="wrap_header">
<div id="logoplacer">
<a href="http://wikitest.gutknecht-informatik.com">
<img id="img_logo" src="/../data/images/Logo_Guestbook.png" alt="Guestsbook Home"/>
</a>
</div> <!-- logoplacer -->
<div id="profileplacer">
<?= $ProfilePlacer ?>
</div> <!-- profileplacer -->
</div> <!-- wrap_header -->
<div id="wrap_content">
<div id="content">
<div id="content_title">
<h2><?=$CurrContentTitle ?></h2>
</div> <!-- content_title -->
<div id="content_text">
<?=$CurrContentText ?>
</div> <!-- content_text -->
</div> <!-- content -->
</div> <!-- wrap_content -->
<div id="wrap_footer">
© by Kathara
</div> <!-- wrap_footer -->
</div> <!-- wrap_main -->
</div> <!-- whity_layer -->
</body>
</html>
And CSS:
*{
font-family:sans-serif;
font-size:12pt;
color:white; /*003300*/
padding: 0;
margin: 0;
list-style: none;
}
html {
position: absolute;
background-image: url('/../data/images/03.jpg');
background-attachment: fixed;
min-height:100%;
width:100%;
z-index: -1;
}
body {
height: 100%;
max-height:auto;
width:100%;
position: relative;
z-index: 0;
}
#whity_layer {
background: rgba(255,255,255,0.7);
margin-left: calc((30% - 2px) / 2);
width: calc(70% - 2px);
height: 100%;
position: fixed;
overflow: auto;
z-index: 1;
}
#wrap_main {
width: 100%;
min-height: 100%;
}
#wrap_content {
display: inline-block;
position: relative;
left: 190px;
top: 45px;
width: calc(100% - 200px);
background: #1e1e1e;
min-height: 100%;
margin-bottom: 10px;
}
#content{
position: relative;
color: white;
margin: 5px auto 10px;
height: 100%;
min-height: 100%;
width: 95%;
}
I'll have yet to decide the min-height of the content-wrapper, but I'll figure it out.
EDIT 2
I have to add that at the moment I have a scrollbar on the whity_layer if the content overflows (overflow: auto) which I can't get rid of for the time being... every homebrew attempt I found wouldn't work with my markup... Nowadays it should be easier to hide scrollbars with css in my opinion...
What do I need to change, so that the #wrap_main is always as big as it's content?
You don't need to use height or min-height to have the #wrap_main always as big as it's content.
How can I get my #content (or #wrap_content) to adapt to the height of the content (including text and images)?
Just take the height and min-height out of the CSS
Do I need to change something in the html-markup?
Not really, just change the CSS.
Here is a jsfiddle without the height and min-height on CSS that will adjust it's height according the content.
EDIT:
If you just need a whity background, you might consider this:
Create a new div #whity_layer and make it absolute before all the other divs:
<body>
<div id="whity_layer"></div>
<div id="wrap-main"></div>
.........
Change the CSS to:
body {
position: relative;
}
#whity_layer {
background: rgba(255,255,255,0.7);
position: absolute;
width: 100%;
height: 100%;
}
#wrap_main {
// Remove background
}
A time ago i tried to find a css alternative to make my div always as big as it's content, but as long as i remember that was horrible/hard, i'am sorry that i can't really answer you, but if you want to try with another method you can use AngularJs with, for exemple, ng-style so you can give your divs a "dynamic" size.
The rest is all about algorithm :).
Good luck mate :3
I have a problem with some HTML elements. I have an image and a title in a <header> tag - they should both move independently to each other, however when I move the img element down 40px with the margin-top attribute - the title seems to move down 40px with it. So I add margin-top: -20px; to move it back up and it seems to stay put.
Here's my code:
The header file:
<div class="page">
<header>
<div class="titlesec">
<img class="circular" src="themes/default/image.jpg" />
<a class="logo" href="<?php echo base_url(); ?>">
<?php echo site_name(); ?>
</a>
</div>
<div class="split"></div>
</header>
The footer file:
<footer>
<p>© Copyright <?php date("Y"); ?> Duncan Hill</p>
</footer>
</div>
</body>
</html>
and my css:
.page {
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
.logo {
font-family: 'Helvetica Neue';
font-weight: 100;
font-size: 56px;
text-decoration: none;
color: #555555;
margin-top: -20px;
}
.split {
height: 1px;
background-color: #CCCCCC;
}
.circular {
margin-top: 40px;
width: 80px;
height: 80px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
.titlesec {
height: 150px;
}
Any help is appreciated immensely!
img and a are inline tags. Which means they are in the same line. Adding margin-top manipulates this line, and affects therefore both of them.
Depending on what you want to do, you could solve this with surounding both elements with their own div. Then you can style the divs independently. Maybe a float on those divs comes in handy, too.
Close your "page" DIV. It seems that your not properly closing your html tags.
I am very new to web development and PHP. May be this is simple question but searched a lot in Internet but couldn't find the solution.
I have this code in my CSS:
.categories .cat_sec {
float: left;
width: 232px;
height: 360px;
padding-top: 10px;
margin-right: 1px;
}
.categories .cat_sec h5 {
width: 232px;
color: #FFF;
padding: 10px 0px;
}
.categories .cat_sec .cats {
width: 232px;
height: 50px;
background-repeat: no-repeat;
padding-top: 259px;
}
.categories .cat_sec .cat1 {
background-image: url(../images/gold/bangles.gif);
}
And calling this CSS style in HTML by the following way:
<div class="cat_sec">
<h5> <?php echo $mCollections_array['SubCollectionName']; ?></h5>
<div class="cats cat1">
<ul>
<li>Some Text </li>
<li>SomeText</li>
<li class="viewall">View All</li>
</ul>
</div>
</div>
I have to change the image dynamically from the server. But i couldn't get any idea about changing the image in this line of code <div class="cats cat1">. In this cat1 represents the image already defined.
How do I add the image dynamically in the above code?
You can use inner CSS:
<div class="cats" style="background-image:url('your/path/to/image');">
<ul>
<li>Some Text </li>
<li>SomeText</li>
<li class="viewall">View All</li>
</ul>
</div>
Based on what you have said to me: You want to edit a CSS file with PHP
See this, this annddd this
You can also embed PHP into the CSS file to do these kinds of things for you.
working on answer now