Here's my code
HTML:
<body>
<div id="wrapper"> <!--wrap for all the page-->
<div id="header"> <!-- div for top part-->
<!--<p><img src="image/bannerwithologo.jpg"></p>-->
<div id="txtlogo"> <!-- inside header for text-->
<p>HANA Squad</p>
</div>
<div id="menu"> <!-- inside header for menu-->
<p href=#>Vidéos</p>
<p href=#>Photos</p>
<p href=#>Agenda</p>
</div>
</div>
<div id="contenu"> <!-- contents-->
<div id="welcoming"> <!-- short presentation of the website-->
</div>
</div>
</body>
CSS:
.header {background-image: url('../image/banner.jpg');
height:500px;
width: 500px;
Don't care about the comment in my div header, i was trying something else and didn't erase it
It is not a problem of files directory because if i put the background-image in html in the css, my image is showing up
I have tried to put different size of my div header but ... Not working
I know it's a stupid problem ..
<div id="header"> you use an id in your code then you have to use a # in your css for an id declaration.
#header {background-image: url('../image/banner.jpg');
height:500px;
width: 500px;
for your code you have to set a class for example
<div class="header">
The problem is that your header in your HTML is an id (id="header") yet your CSS is targeting a class (.header).
You need to either switch your CSS to target the id, or change your HTML to be a <div class="header"></div>. For what it's worth, it's generally accepted that for more maintainable CSS, you should favour classes over IDs. So I'd go with the latter of the two options.
Here is your Answer
#header {background-image: url('https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
height:500px;
width: 500px;
}
<body>
<div id="wrapper"> <!--wrap for all the page-->
<div id="header"> <!-- div for top part-->
<!--<p><img src="image/bannerwithologo.jpg"></p>-->
<div id="txtlogo"> <!-- inside header for text-->
<p>HANA Squad</p>
</div>
<div id="menu"> <!-- inside header for menu-->
<p href=#>Vidéos</p>
<p href=#>Photos</p>
<p href=#>Agenda</p>
</div>
</div>
<div id="contenu"> <!-- contents-->
<div id="welcoming"> <!-- short presentation of the website-->
</div>
</div>
</body>
Related
So bit of background on my issue. I'm using an external carousel and I am trying to modify each image section to include text. There seems to be an overflow:hidden on the sp-carousel-frame class that is making it not visible but without this the unselected images on either side go full size.
I basically need the item-text class to be displayed.
I really hope I explained this ok.
I'm going include an image that shows the issue below.
HTML
<script src="https://wordpress-84115-1849710.cloudwaysapps.com/wp-content/themes/inspiration-marketing-theme/assets/js/carousel.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container collaboration-header">
<div class="row">
<div class="col-md-12">
<h1>Collaboration and Teamwork</h1>
</div>
</div>
</div>
<div class="container main-carousel">
<div class="row">
<div class="col-md-12">
<div class="sp-carousel-frame sp-carousel-frame-pos">
<div class="sp-carousel-inner">
<div class="sp-carousel-item" style="overflow: visible !important;">
<img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Main-Slider-Image.jpg"/>
<div class="item-text">
Hello World
</div>
</div>
<div class="sp-carousel-item"><img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Left-Slider-Image.jpg"/>
</div>
<div class="sp-carousel-item"><img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Right-Slider-Image.jpg"/>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.collaboration-header h1{
text-align: center;
padding: 1.5em 0;
}
.main-carousel {
margin-bottom: 20% !important;
}
The JSFiddle Below:
Here is my JSFiddle
Add Class this carousel-caption on item-text
<div class="item-text carousel-caption">
Hello World
</div>
https://jsfiddle.net/lalji1051/3hyb82fg/1/
OK I got it solved basically although I probably need to tweak it a bit to get it perfect what I did was disable the overflow:hidden on the sp-carousel-frame and change it to visible. Then on the parent div col-md-12 I attached another class called overflow:
HTML
<div class="col-md-12 overflow">
<div class="sp-carousel-frame sp-carousel-frame-pos">
<div class="sp-carousel-inner">
<div class="sp-carousel-item" style="overflow: visible !important;">
<img src="/wp-content/uploads/2021/04/Main-Slider-Image.jpg"/>
<div class="item-text">
Hello Hows it going like
</div>
</div>
<div class="sp-carousel-item"><img src="/wp-content/uploads/2021/04/Left-Slider-Image.jpg"/>
</div>
<div class="sp-carousel-item"><img src="/wp-content/uploads/2021/04/Right-Slider-Image.jpg"/>
</div>
</div>
</div><!-- End sp-carousel-frame -->
<hr />
</div><!-- Close Col-md-12 -->
CSS:
.sp-carousel-frame {
overflow: visible !important;
}
.overflow {
overflow: hidden !important;
padding: 0 !important;
}
Updated JSFiddle
I wrote a website as shown here.
Code is:
<div id="mainDiv" class="container">
<div id="header">
<div class="plc">
<h1></h1>
<nav>
<div id="navPos">
<div style="position: relative;right: 113px;">Register</div>
<div style="position: absolute;right: 255px;top: 37px;">Login</div>
<div style="position: absolute;top: 38px;right: 123px;">Market</div>
</div>
</nav>
</div>
</div>
<div id="body" class="container-fluid">
<div id="container">
<div id="overlay"></div>
<div id="menu"></div>
<div id="formPos"></div>
<div id="or">OR</div>
<div id="fbReg">
<img src="images/fbOne.png" id="fbIcon">
<div id="fbPos">Register with Facebook</div>
</div>
<div id="gReg">
<img src="images/gPlus.jpg" id="gIcon">
<div id="gPos">Register with Google</div>
</div>
<div id="cliPos">
<img src="images/Bistip-in-media.png" id="imgCli">
</div>
</div>
</div>
<div id="footer">
hello
</div>
</div>
CSS can be found in that jsfiddle. The problem is: Only body is scrollable, but header and footer aren't scrollable. As a result, I can't see the footer. How can I fix it?
For best results, expand the output window of jsfiddle
Anytime you find no scroll, is because there is overflow:hidden; property, which should be removed or changed to 'auto'
In your Case:
1) Remove overflow:hidden; or overflow:auto;
2) If you do not want scroll in your content(i.e. portion excluding header & footer)
DEMO
CSS
html,body
{
overflow:auto; /* Or just REMOVE overflow*/
}
#body
{
overflow:auto; /* Or just REMOVE overflow*/]
}
I'm currently using Customizr theme, with the default settings for the pages set to "full width / no sidebars".
However, when I try do do something like this within a page :
<div id="blue-background">
<h1 style="text-align: center;">Full width text with background color ? >/h1>
</div>
with the corresponding CSS code :
#blue-background{
width: 100%;
float: left;
padding: 20px;
background: #2680BE;
position: relative;
}
I still have white margins around my text. Increasing the width doesn't seem to be a good solution, so how can I do ?
here is an example of what I get with this code:
http://www.cirnu.com/bandeau/
Your main-wrapper should look like this
<div id="main-wrapper">
<div class="tc-hot-crumble container" role="navigation"><div class="row"><div class="span12"><div class="breadcrumb-trail breadcrumbs" itemprop="breadcrumb"><span class="trail-begin">Accueil</span> <span class="sep">»</span> <span class="trail-end">Bandeau</span></div></div></div></div>
<div role="main">
<div class="row column-content-wrapper">
<div id="content" class="span12 article-container">
<article id="page-623" class="post-623 page type-page status-publish hentry row-fluid">
<header class="entry-header">
<h1 class="entry-title format-icon">Bandeau</h1>
<hr class="featurette-divider __before_content">
</header>
<div class="entry-content">
<div role="main">
<div id="blue-background">
<div class="container">
<h1 style="text-align: center;">Full width text with background color ?</h1>
</div>
</div>
</div>
</div>
</article>
</div><!--.article-container -->
</div><!--.row -->
</div><!-- .container role: main -->
</div>
Then you'll need to change some CSS rules:
#blue-background {
padding:20px 0;
/* then all the other rules you already have */
}
.article-container {
width:100%;
}
How can I get my footer to sit on the bottom of the page outside of the container? The template is based on the boilerplate.
What CSS do I need to use to make it sit at the bottom?
HTML:
</div><!-- end of container -->
<div clear="clear"></div>
<div id="footer" class="w960">
<div id="footerHolder">
<div class="foot left"></div>
<!--
<div class="foot right">
FOLLOW US:
<div id="social">
<div id="fb" class="socialIcon"></div>
<div id="tw" class="socialIcon"></div>
</div>
</div>
-->
</div>
</div>
CSS:
#container{width:960px;margin:0px auto 40px auto;}
#footer{width:100%;clear:both; height:66px;background:#2d2d2f;}
#footerHolder{width:960px;margin:auto;}
Not sure what you're looking for exactly but shouldn't your #footerHolder contain the #footer?
Also, div clear="clear"
is not required since you are specifying the clear:both property in #footer.
This should rest nicely at the bottom of the page.
I want to use sticky footer in this structure, can anyone write the code for me cause i have tried a lot of techniques but none of them are working perfectly for me.......
<body>
<div id="wrapper">
<div id="header">
<div id="logo"></div>
<div id="appoint">
<ul>
<li>info#company.com </li>
</ul>
</div><!--appoint div close-->
<div id="navi">
</div><!--navigation div close-->
</div><!--header div close-->
<div id="slidecontainer">
</div> <!--closing tag for container-->
<div id="feature">
<div id="featurewrap">
</div> <!--feature wrap close-->
</div> <!--feature div close-->
<div id="leftcol">
</div><!--leftcolumn div close-->
<div id="rightcol">
</div><!--right column div close-->
</div><!--wrapper div close-->
<div id="footer_wrap">
<div id="footer">
<div id="footerleft">
</div><!--footerleft div close-->
<div id="footerright">
</div><!--footerright div close-->
</div> <!--footer main div close-->
</div><!--footer div close-->
Also i am using full width repeating backgrounds for body and footer_wrapper that is the problem i am having........
OK, you need the following style :
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -(<FOOTER_HEIGHT>+<FOOTER_TOP&BOTTOM_MARGIN>)px;
/* note the negative value */
}
#footer_wrap, .push {
height: <FOOTER_HEIGHT>px;
}
</style>
Note on #wrapper in bottom margin must have a negative value of the total of and bottom and top margins of footer if you have ...
On your code:
<div id="wrapper">
<!-- What ever code is here -->
<div class="push"></div><!-- this div MUST be last div before closing of "wrapper" -->
</div>
<div id="footer_wrap">
<!-- What ever code is here -->
</div>
Regards,