html sections background image switching - html

practicing my html & css skills meanwhile making random stuff, although stuck on making images to switch in section, for example every 5 seconds image changes into other.
That's the section's html and css (if it's matter in this case)
HTMLS:
<section id="showcase">
<div class="container">
<h1></h1>
<p></p>
</div>
</section>`
CSS:
#showcase{
min-height:400px;
background:url('../img/img1.jpg') no-repeat 0 -400px;
background
text-align:center;
color:#ffffff;
border-bottom:#0B0B0B 3px solid;
}
#showcase h1{
margin-top:100px;
font-size:55px;
margin-bottom:10px;
}
#showcase p{
font-size:20px;
}
P.S trying to make it responsive as much as I can

Related

Making banner above nav bar using CSS and HTML with logo/icon floated left of text

I'm having issues trying to create a "banner" above the navigation bar on my website using CSS/HTML.
I can't get a background color to display in the banner, and I also can't manage to get the header text to float to the right of the banner logo/icon. Here is my code so far for both HTML header and CSS.
HTML:
<header>
<link href="index.css" rel="stylesheet">
<div class="banner">
<img src="logo.png" class="profile-picture" alt="Header Logo">
<h1 class="title">Header info 1</h1>
<h2 class="title">Header info 2</h2>
<h3 class="title">Header info 3</h3>
</div>
<nav>
<! --this part works fine so code omitted -->
</nav>
</header>
Here is the CSS:
.header img{
float: left;
}
.header .banner{
display:inline-block;
*display:inline;
padding: 20px;
background-color: #5C5F58;
margin:10px;
}
.header .banner .title{
display:inline-block;
*display:inline;
font-family: 'Bebas Neue', sans-serif;
color: #ffffff;
text-transform: uppercase;
}
So a summary of the problems I'm having:
I can't get the logo to float to the left of the title headings (they appear underneath the logo)
I can't get the background color of the banner to change
I can't get the font style or font color to change
I know it's probably the way I'm referring to these elements in the CSS, but I can't figure out how to refer to them properly.
Thanks in advance for your help
I can't get the logo to float to the left of the title headings (they
appear underneath the logo)
You give 1 sibling inside .banner float and the other one is not floating. This will make them overlap. Give either none or both of them float.
I can't get the background color of the banner to change
Use the background-color css-property.
I can't get the font style or font color to change
Change the .header into header in your css. The first one is targeting the class header and the latter one targets the header html-tag.
Pro tip: try using an online code editor with HTML and CSS like Codepen to ask your questions. This will make it easier for people to try and answer your questions resulting in faster and more elaborate answers.
I have replaced the css class to inline css checkit out if it can help
<div style='background-color:red'>
<img src="https://cdn.pixabay.com/photo/2014/04/14/20/11/pink-324175_1280.jpg" style="float:left; height: 80px; padding:5px;" alt="Header Logo">
<h1 class="title" style='font-size: 25px; color:#ffff00;'>Header info 1</h1>
<h2 class="title" style='font-size: 15px; color:#00ff00;'>Header info 2</h2>
<h3 class="title" style='font-size: 10px; color:#0000ff;'>Header info 3</h3>
</div>
<nav>
<! --this part works fine so code omitted -->
</nav>
Your specificity in your CSS is wrong. If you amend these to the code below you'll get the behaviour you're looking for.
.banner img{
float: left;
}
.banner {
display:inline-block;
*display:inline;
padding: 20px;
background-color: #5C5F58;
margin:10px;
}
.title {
display:inline-block;
*display:inline;
font-family: 'Bebas Neue', sans-serif;
color: #ffffff;
text-transform: uppercase;
}

Need Help in Div Management Please

I am a Beginner Website Developer, I want to make my college's project but stuck at the beginning because my navigation div and small divs in navigation div are not going to transform or transit at once. when i apply transition at one of em with absolute position all (also apply absolute position to other three small divs) the all three of em except first disappears. Code is linked. I want to make navigation just like IMDB's Navigation. (with downside transition and with links and picture at one end.)
-Thank in advance.
HTML CODE:
<body>
<div id="Papadiv">
<header id="Header">
<Div id="Logodiv">
<img src="Images/Logo.jpg" height="100px" width="100px" />
</Div>
<Div id="Titlediv">
<font size="+5" face="Comic Sans MS, cursive">MobilePassion.com</font>
</Div>
</header>
<nav id="Nav1">
<div id="navoption1">
<a href="Index.html">
New Arrivals</a>
</div>
<div id="navoption2">
<a href="Famousmodels.html">
Famous Models</a>
</div>
<div id="navoption3">
<a href="Whoweare.html">
Who We Are?</a>
</div>
<div id="navoption4">
<a href="Contactus.html">
Contact Us</a>
</div>
</nav>
/* CSS Document */
#Nav1
{
background-color: #FDAA2F;
height:50px;
width:800px;
}
#navoption1
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
}
#navoption2
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
}
#navoption3
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
}
#navoption4
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
#navoption1:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink;
background-image:url(Rose%20(1).jpg)
}
#navoption2:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink
}
#navoption3:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink
}
#navoption4:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink
}
I think first off you need to do some research on how to build a "CSS Mega Drop Down Menu". (That's usually what they are called and you should be able to find a good example in which you can structure your styling off of.)
A "classic" drop down menu usually contains lists nested (or in your case - divs) within parent list items.
"Here" is a good step by step example that I think should get you off and running.
I have been rtying to find a good resource for an example. These are good examples to learn from i think. http://code-tricks.com/simple-css-drop-down-menu/ , http://css-tricks.com/simple-jquery-dropdowns/ . It would also be wise for user experience to use hoverintent (http://cherne.net/brian/resources/jquery.hoverIntent.html) or a delay. This creates a better user experience.

Is it accessible when I wrap the header in a link?

I have a header and I would like to create a back to homepage link from it. Is it a mistake if I do this?
<a href="index.php?menuid=1" title="Go back to the homepage.">
<header>
<h1>Title of the page</h1>
</header>
</a>
If it's better to create link from the <h1> then how to expand the link to the size of the header? Because the link on it looks like this:
If you want the entire header to be a link, that is the correct way to do it (at least in modern HTML5 browsers). If you want your <h1> to be the full width of <header> then add
h1 {
width: 100%
}
to your CSS (though you should add an id or class to the h1 and select through that, better than a general h1).
Adding my answer for what is worth (also updated you fiddle)
header{
display:block;
height:210px;
width:560px;
text-align:left;
background-color:#eb4172;
border: 20px solid transparent;
}
h1 {
background-color:#00aaff;
width:100%;
height:100%;
display:block;
}
h1 a{
width: 100%;
display: block;
height: 100%;
}

how do i sort out this css

I have a code everything seem alright but the front end being rendered isn't. I have four boxes with a total width of 1000px and each box is 250px floated left, but the page when displayed shows the div as wider than 1000px, i don't know where the ish is, please find below the html code and css for that region:
<div class="strategy">
<div class="strat">
<p>To ensure our clients get the best results, we employ a strategy which takes time to create the best possible combination of ideas beyond just a random collection of texts and images.</p>
</div>
</div>
<div class="strategy">
<div class="design">
<h2>Design</h2>
<p>We plan and strategize your project through even before starting it. An evaluation meeting is scheduled with you to get a chance to understand what your requirements are. We analyze, review and discuss with you on various options for your project. This will guide our brainstorming, research and gathering of content for designing the best solution for you.
</p>
</div>
</div>
<div class="strategy">
<div class="develop">
<h2>Develop</h2>
<p>Based on the deliverables from the design step, we set to work harnessing our talents and appropriate technologies available to execute the project with focus on quality, cost and time. The client is carried along and kept in the loop at each stage for design approvals through our Online Project Sneak-Peek Platform (PSP Platform). This allows you to keep track of changes and updates into ensuring that the project, no matter how small or large, is a complete success.
</p>
</div>
</div>
<div class="strategy">
<div class="deploy">
<h2>Deploy</h2>
<p>Finally your project is ready for deployment. This is in two phases; first phase in which we deploy project for debugging and troubleshooting for errors and glitches. When this phase has been certified then we move to the second phase which is the final deployment of the project and handover.
</p>
</div>
</div>
<div class="clear"></div>
and the css for it is:
#about{
width:100%;
}
#about .about{
width:1000px;
margin:auto;
text-align:justify;
border-bottom:solid #000 1px;
padding:0 0 20px 0;
}
.about h1 {
width:1000px;
margin:auto;
text-align:left;
padding:50px 0;
font-size:40px;
font-weight:normal;
border-bottom:solid #000 1px;
}
.about h2 {
width:1000px;
margin:auto;
text-align:left;
padding:20px 0;
font-size:25px;
font-weight:normal;
}
.about p{
font-size:14px;
}
.about .strategy{
width:25%;
float:left;
text-align:left;
color:#fff;
}
.about .strat{
background:#33bbec;
padding:90px 20px 0 20px;
height:370px;
}
.about .design{
background:#5a5a5a;
padding:15px 20px;
height:430px;
}
.about .develop{
background:#4a4a4a;
padding:15px 20px;
height:430px;
}
.about .deploy{
background:#3e3e3e;
padding:15px 20px;
height:430px;
}
Why are you nesting your divs? And in your CSS you are styling the headers to be 1000px? Thats not right dude..your code is a mess...style the DIV CLASS ...not the headers...

Aligning div and section elements with flex CSS

I'm currently redoing some code to update to HTML5 (and trying to de-uglify CSS), but so far my alignment and layout doesn't seem to be working as expected. Here's part of what I have:
<main class="width">
<div class="r1">
<section class="c1">
<h1>header</h1>
stuff
</section>
<!--Line Break-->
<section class="c1">
<h1>header</h1>
stuff
</section>
</div>
<!--Next Column-->
<div class="r2">
<section class="c2">
<h1>header</h1>
stuff
</section>
</div>
</main>
CSS:
#font-face {
font-family:'Roboto';
font-style:normal;
font-weight:400;
src:url(/resources/font.woff) format('woff');
}
* {
margin:0;
padding:0;
font-size:small;
font-family:Roboto;
vertical-align:middle;
border:none;
text-decoration:none;
}
.width {
margin:0 auto;
width:86%;
min-width:1000px;
}
.bg {
min-width:1000px;
background:linear-gradient(#444, #000, #444);
}
main {
line-height:1.5;
text-align:center;
}
body>.main {
font-size:0;
}
section {
border:1px solid #BBB;
background:#000;
border-radius:7px;
display:inline-block;
overflow:hidden;
}
h1 {
background:linear-gradient(#444, #000, #444);
padding:5px;
color:#FFF;
}
.r1 {
color:#FFF;
display:inline-block;
}
.r2 {
color:#FFF;
display:inline-block;
}
.c1 {
width:33%;
}
.c2 {
width:66%;
}
(Ignore r1 and c1 naming. They don't actually represent a row or column)
However, this does not work the way it used to. What I'm trying to do is to have two rows of 66% width columns above each other, and then next to them, a larger single 33% width column to the right of them. Instead, I've got the the first two sections on one line, taking up a total of 66% width (so each section is 33% width), and then the next section ends up underneath it.
Ideally, I want to use the flex code, so that I can use up all available space, but I'm still new to it, and don't know my way around it very well. The problem with using percentage widths is that even after white-space removal, things still break to the next line when zoomed in enough, and I think that the flex method is more elegant and modern anyway.