So right now I'm starting a website im working on by just getting everything positioned and formatted on the page before i try to stylize it more and add some javascript. Oddly, i added three div tags after my form for the next row to be split into three columns. On my css sheet I added a border just so i can see the size of the boxes and the headings. Problem is nothing is showing up. Any help would be appreciated because i bet its something really simple.
<!doctype html>
<html lang="en"">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="operationStyle.css">
<title>Operation:Educate Children</title>
<script language="javascript" type="text/javascript">
image1=new Image();
image1.src="supermario.png";
image2=new Image();
image2.src="mario.png";
</script>
</head>
<body>
<header class="header">
<img src="mario.png" alt="header"/>
<h2>"Only the educated are free-Epictetus"</h2>
</header>
<table>
<tr>
<th>Home</th>
<th>About Us</th>
<th>Current Project</th>
<th>Get Involved</th>
<th>Calendar</th>
<th>Donate</th>
</tr>
</table>
<div id="slideshow">
<img class="slide" name="slide" src="supermario.png" width="100" height="200">
<script>
var step=1;
function slideit(){
if(!document.images)
return;
document.images.slide.src=eval("image"+step+".src")
if(step<2)
step++;
else
step=1;
setTimeout("slideit()",2500);
}
slideit();
</script>
<div>
<div class="contact">
<h2>Contact Us!</h2>
<form action="contact.php" method="post">
<strong>Name:</strong>
<input type="text" name="name"><br></br>
<strong>E-Mail:</strong>
<input type="text" name="email"><br></br>
<strong>Message:</strong>
<textarea name="message" cols="25" rows="12"></textarea>
<input type="submit" value="Send">
<input type="reset" value="Clear">
</form
</div>
<div class="events">
<h3><strong>Upcoming Events</strong></h3>
</div>
<div class="follow">
<h3><strong><Follow Us!></h3></strong>
</div>
<div class="blog">
</div>
</body>
</html>
BODY{
margin-left:15%;
margin-right:15%;
}
.header h2{
color:blue;
text-align:right;
border:5px solid black;
font-family:'Bookman Old Style',serif;
font-size:10pt;
font-style:italic;
width:28%;
float:right;
height:200px;
}
.header img{
width:70%;
float:left;
border:thin black;
height:200px;
}
table{
border:5px solid black;
width:100%;
height:75px;
clear:left;
}
.slide{
border:5px solid black;
width:70%;
height:400px;
float:left;
}
.contact{
border:5px solid black;
width:27%;
height:400px;
float:right;
}
.contact h2{
text-align:center;
}
.contact form{
margin-left:2%;
}
img.slide{
position:absolute;
left:0;
top:0;
}
#slideshow{
position:relative;
overflow:hidden;
}
.events{
float:left;
width:33%;
border:black;
height:200px;
}
.follow{
float:left;
width:33%;
border:black;
height:200px;
}
.blog{
float:left;
width:33%;
height:200px;
border:black;
}
Look at this line :
<h3><strong><Follow Us!></h3></strong>
You are using < and > inside the strong tag. This can screw up your HTML. Also your tags are not in the right order, you should change the line to this :
<h3><strong>Follow Us!</strong></h3>
Also, your last form's closing tag is not closed properly.
There are a couple closing tags that are out of order:
<div class="follow">
<h3><strong><Follow Us!></h3></strong>
</div>
</h3> and </strong> need to be reordered to be <h3><strong><Follow Us!></strong></h3>
You're also missing a closing form tag. </form lacks a closing >.
Change your CSS to read:
.events, .follow, .blog { // they are all the same, why having three times as much code?
float: left;
width: 33%;
border: 1px solid black;
height: 200px;
}
Then fix the missing > in </form
You also have missed the / in the slideshow div at the end </div>
(and fix the tag pointed out by Dany (<Follow Us!> > Follow Us!)
Then you will see the DIVs
As has been pointed out, your HTML code has several syntax errors, which made browsers render the 3 <div>s you added inside of the <div class="contact"> — and since the height of that was specified they were cut off.
Related
I need it to look like this:
Here is the markup:
<div class="hni_vaBreadcrumbContainer">
<progress class="hni_vaBreadcrumbProgress" value="0" max="100"></progress>
<span class="hni_vaBreadcrumbContent">0%</span>
</div>
Here are a couple jfiddles I tried but couldn't get working:
http://jsfiddle.net/x4wLf/, http://jsfiddle.net/cogent/6A5Lb/
I could just use a background image for the percentage text but prefer all CSS.
thanks!
I think I actually figured it out with very little markup/css.
http://jsfiddle.net/o22b4uyz/2/
Markup
<div class='wrapper'>
<div class='concave'><span class="percent">20%</span></div>
</div>
CSS
div.wrapper {
background:blue;
width:80px;
height:20px;
position:relative;
border-radius: 50px;
}
div.concave {
position:absolute;
background:white;
width:20px;
height:20px;
border-radius:50px;
left:-3px;
}
span.percent {
padding-left: 40px;
color: #fff;
}
http://www.walkerspencer.com/chrhsweb/max
So I'm currently working on a high school project, and I'm completely stumped. One of my divs, article, isn't behaving how I'd like it to. It has a height of 0. Now, after a lot of googling and research, it seemed like this was a common issue... for containers which contained floating elements. My article contains no floating divs. I even tried removing float from the css for my #buttons div, and it had no effect. I've also tried most of the suggested float fixes: the clearfix method, clear:both. At this point, I just need an outside opinion. I couldn't find any major errors in my code (besides a general disorganization and misuse of semantic elements). The intended behavior is that sections scale while maintaining a 16:9 ratio as the browser resizes, and have a black transparent background that fills the entire article. I could also apply the background to article, but article doesn't have a height either. If you'd just like to critique my bad code habits and formatting, that's alright too :). The images' absences shouldn't be important, though they are in a 16:9 ratio, and I had this problem before adding any jquery. Thank you so much. Sorry if there's an issue with my post or how I've asked it, it's my first time asking a question on here.
HTML:
<head>
<meta charset='utf-8'/>
<title>design</title>
<link rel="stylesheet" type="text/css" href="reset.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#images").cycle({
containerResize: false,
slideResize: false,
fit: 1
});
$('article').cycle({
activePagerClass: 'activeSlide',
containerResize: false,
slideResize: false,
fit: 1,
timeout: 0,
speed: 300,
startingSlide:0,
pager: "#buttons",
pagerAnchorBuilder: function(idx, slide) {
return '#buttons li:eq(' + idx + ')';}
});
$('#right').click(function() {
$('article').cycle("next");
return false;
});
$('#left').click(function() {
$('article').cycle("prev");
return false;
});
});
</script>
</head>
<body>
<div id="container">
<div id="arrows">
<div id="left"><</div><div id="right">></div>
</div>
<nav>
<ul id="buttons">
<li>
<li>
<li>
<li>
<li>
</ul>
</nav>
<div class="fix"></div>
<article>
<section id="images">
<img src="images/alaska.jpg" width="100%" height="auto"/>
<img src="images/field.jpg" width="100%" height="auto"/>
<img src="images/sunset.jpg" width="100%" height="auto"/>
</section >
<section id="about">
<p>
my name is <span style="color:crimson">max</span>.<br>
i'm a senior in high school.<br>
i love <span style="color:yellow">code</span><br>
<span style="color:#a45bc4">&</span><br>
i love <span style="color:lightgreen">design</span>.<br>
<span style="color:#a45bc4">welcome to my site.</span>
</p>
</section >
<section id="work">
</section >
<section id="contact">
</section>
<section id="place">
</section>
</article>
<div id="bottom"></div>
</div>
</body>
CSS:
body{
background-image:url("images/clouds.jpg");
background-size:cover;
background-color:white;
background-repeat:no-repeat;
height:100%
}
#container{
width:70%;
min-height:103px;
margin:0 auto;
min-width:182px;
}
#arrows{
max-width: 140px;
height: 70px;
background: #f7f7f7;
-moz-border-radius: 70px 70px 0 0;
-webkit-border-radius: 70px 70px 0 0;
border-radius: 70px 70px 0 0;
margin:auto;
position:relative;
top:25px;
z-index:100;
border-top:1px solid;
border-color:#cccccc;
font-family:"Lato";
text-align:center;
vertical-align:middle;
line-height:60px;
font-size:68px;
color:#cfcfcf;
font-weight:100;
font-stretch:ultra-condensed;
}
#right:hover, #left:hover{
color:#a45bc4;
text-decoration:none;
}
#right, #left{
display:inline;
color:#cfcfcf;
text-decoration:none;
cursor:pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
nav{
width:calc(100%-2px);
border-left:1px solid #cfcfcf;
border-right:1px solid #cfcfcf;
height:35px;
background-color:#f7f7f7;
min-width:182px;
}
#buttons{
position:relative;
float:right;
margin-right:6px;
z-index:100;
}
.fix{
clear:both;
}
.current{
padding-right:0px;
}
#buttons li{
display:inline-block;
height:26px;
width:26px;
background-image:url("images/navc.jpg");
background-repeat:no-repeat;
background-position:center;
background-size:24px;
margin-left:8px;
margin-top:4px;
vertical-align:middle;
cursor:pointer;
}
#buttons li:hover{
opacity:.8;
}
#buttons a{
color:black;
text-decoration:none;
}
#buttons li.activeSlide{
background-image:url("images/violetc.jpg");
height:26px;
width:26px;
background-size:26px;
vertical-align:middle;
}
article{
width:100%;
min-width:184px;
height:100%;
}
section{
height:100%;
width:100%;
margin:0 auto;
text-align:center;
vertical-align:middle;
color:white;
font-weight:100;
font-size:36px;
font-family:"Lato";
background-color:rgba(0,0,0,.4);
}
p{
}
#about{
}
.option img{
opacity:.6
}
.option:hover{
opacity:.8;
}
#bottom{
border-left:1px solid #cfcfcf;
border-right:1px solid #cfcfcf;
border-bottom:1px solid #cfcfcf;
height:30px;
background-color:#f7f7f7;
min-width:182px;
margin-top:56.25%;
}
#media all and (max-width:690px){
#buttons{
margin-top:2px;
width:98%;
text-align:center;
}
nav{position:relative;
text-align:center;}
}
If you're keeping the slideshow plugin, and it is what's causing the absolutely positioned children (you're not doing it,) then your only option is to force the height of the article element, if you want to use it for something.
You can either apply a class/ID to it (if you're using other article elements that have nothing to do with this style, and you only use it once per page, then use an ID, or if you want to re-use it somewhere else on the same page, use a class.) So you would have something like:
article.slideshow-container { height: 498px; }
And you can then use it for whatever you want. This is a fixed-height though, so if image height changes, you lose out again.
The problem is definitely with your implementation of the jQuery Cycle Plugin. As setek has mentioned, the slideshow makes your section divs position absolute, which collapses the height of the article element to 0. You can add the following to your cycle script to dynamically adjust the height for each slide/section:
before : function(currSlideElement, nextSlideElement){
$('article').css('height', $(nextSlideElement).height()+'px');
},
You should also clean up your code (it is a bit of a mess) and try to take things step by step. I have created a working example for you here:
http://jsfiddle.net/BCyD8/
You will have to work a bit to get the spacing right.
My divs do not stack up next to each other
What do I do?
One div comes below the other.
I tried all types of positioning and even relative but it doesn't work.
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="author" content="Chaitanya Gupta">
<meta name="keywords" content="Fashion, Learning, Resources ">
<link href='http://fonts.googleapis.com/css?family=Luckiest+Guy&effect=3d-float' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Bad+Script&effect=3d-float' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/png" href="favicon.ico">
<title>FLR</title>
CSS
<style type="text/css">
hr
{
color:white;
border-width: 2px;
border:medium silver dashed;
}
a:link,a:visited
{
display:block;
color:white;
}
a:hover,a:active
{
background-color:#7C868E;
text-decoration: underline;
border-radius:8px
}
a
{
font-family: "Century Gothic";
font-variant:small-caps;
font-size: 20px;
}
#emboss
{
border-right: 4px solid #2b2b2b;
border-bottom: 4px solid #2b2b2b;
}
#subTopic
{
font-family: 'Luckiest Guy', cursive;
font-size:60px;
font-weight:lighter;;
font-variant:small-caps;
}
#content
{
color:white;
font-family: 'Bad Script', cursive;
font-size:20px;
}
div.menu
{
background-color:#4A5662;
float:left;
width:150px;
height:210px;
border-radius:8px;
margin-top:20px;
margin-left:5px;
text-align:center;
padding-top:10px;
padding-bottom:10px
}
div.content
{
float:right;
}
</style>
<script>
</script>
</head>
HTML
<body background="denim.jpg">
<img src="fas.jpg" style="float:right; height:80px; width:200px;">
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<div id="emboss" class="menu" >
About</span>
<br>
<a href="" >Careers</a>
<br>
Clients
<br>
Blogs
<br>
Contact Us
</div>
<div class="content" id="display">
<h1 id="subTopic" class="font-effect-3d-float">About</h1>
<p id="content">FASHION LEARNING RESOURCES (FLR) is a Gurgaon,
India based small company pioneering Fashion Education &
Training Technology(FETT) products, services, consulting and
delivery services in FETT for the fashion institutes,
industry bodies and government. FLR also offers E learning
& multimedia content in Fashion / apparel Domain.
FLR is started by founding alumni batch of NIFT.</p>
</div>
<!--<hr style="position:absolute; bottom:30px; width: 1200px">
<code style="color:white; position:absolute; bottom:10px">Copyright © 2013 Fashion Learning Resources. All rights reserved.</code>
-->
</body>
</html>
Try this
div.content
{
margin:0 0 0 160px;
}
It may also be useful to wrap a div around menu and content with a spacific width and then make sure menu and content added together with margins and padding are that width.
div.wrap { width 800px}
div.content {width:640px}
Use the display property in your div, and all divs with this will stack horizontally.
display: inline-block
Use display:inline-block within the CSS definition, that should stack them horizontally for you.
div.content
{
width:calc(100% - 160px);
float:right;
}
This should work
This will keep the div with class menu to the left and the content div in the right
Fiddle
div.menu
{
background-color:#4A5662;
height:210px;
border-radius:8px;
margin-top:20px;
margin-left:5px;
text-align:center;
padding-top:10px;
padding-bottom:10px
}
div.menu a{
display:inline-block;
}
and remove <br/> tag after every anchor
<div id="emboss" class="menu" >
About</span>
<a href="" >Careers</a>
Clients
Blogs
Contact Us
</div>
Its easy just do
div.content
{
/*float:right;*/
}
if you want to make it float:right just give it width, check my fiddle http://jsfiddle.net/GafgA/1/
Remove float: right and add a margin - http://jsfiddle.net/xEGRg/
div.content {
margin-left: 230px;
}
I am trying to align a text Email and textbox for it on top of an image at a specific location. I want the position to be fixed, no matter what size the screen is. Here is my html code:
<html>
<head>
<style type="text/css">
#container {
background-color:blue;
}
#content {
background: url('images/orange.jpg') no-repeat center top;
}
#c_main {
color: yellow;
}
#c_email {
position:absolute;
top:200px;
left:410px;
color: #FFFFFF;
font-size: 15px;
}
#c_emailbox1 {
position:absolute;
top:200px;
left:480px;
}
#c_emailbox2 {
position:absolute;
top:200px;
left:620px;
color: white;
font-size: 12px;
}
input {
border:0;
}
.email_textbox1 {
width:130px;
background-image:url('images/text_bg.jpg');
background-repeat:no-repeat;
}
.email_textbox2 {
color: #FFFFFF;
font-size: 11px;
width:130px;
background-image:url('images/text_bg.jpg');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="container">
<div id="content" style="height:1000px;left:0px;border:1px solid red;position:relative" >
<div style="height:100px;width:200px;border:1px solid red;position:absolute;top:250px;left:0px">
<h4> CREATE A USERNAME AND PASSWORD </h4>
</div>
<div id="c_email">
Email
</div>
<div id="c_emailbox1">
<input type="textbox" id="email1" border="0" class="email_textbox1">
</div>
<div id="c_emailbox2">
<input type="text" id ="email" value="Confirm Email Address" class="email_textbox2" onfocus="if
(this.value==this.defaultValue) this.value='';">
</div>
</div>
</div>
</body>
</html>
I cannot get it to align relative to the image. The text and textbox are misplaced when seen in a larger screen or if zoomed in and out. Suggestion please.
See my sample code. This is working. Change the height of parent div, the child always stays at bottom:
<div style="height:300px;border:1px solid red;position:relative">
<div style="height:100px;width:20px;border:1px solid red;position:absolute;bottom:0px">
</div>
</div>
If you want them always to the top of the text box. Make the parent control as relative.
The box or anything which you want to maintain constant distance make it absolute position
.Container {
position:relative
}
.child{
position:absolute
bottom:0px; // how much u wants to maintain..from the element
}
My HTML is simple, I have a content area that wraps around everything and inside it I want three columsn. Two of them have to have fixed widths, and main content area should be flexible.
I wonder what I'm doing wrong - EDIT here is the complete code sorry if it's a bit long!:
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<img src="../../Content/images/cumaviLogo.png" alt="Cumavi.com - Compras y ventas online en Bolivia!" />
<ul id="topuserbar">
<li>Bienvenidos, <span class="userSalute">Sergio!</span></li>
<li>Mis Anuncios</li>
<li>Perfil</li>
<li>Ayuda<img class="helpicon" src="../../Content/images/helpIcon.png" alt="Help icon." width="20" height="20"/></li>
<li>Cerrar Sesion</li>
</ul>
</div>
<div id="headershadow">
</div>
<div id="body">
<div id="leftnavigation"></div>
<div id="contentarea"></div>
<div id="advertisingarea">
</div>
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</body>
</html>
body
{
background-image: url('images/test.png');
background-repeat:repeat;
margin:0;
padding:0;
}
#header
{
background-image: url('images/headerBackground.png');
background-repeat:repeat;
width:auto;
}
#headershadow
{
background-color:Black;
min-height:2px;
}
#topuserbar
{
font-family:Georgia;
font-size:large;
float:right;
margin-top:35px;
margin-right:15px;
}
#topuserbar ul
{
}
#topuserbar li
{
display:inline;
margin-left:10px;
color:#fff;
}
#topuserbar .helpicon
{
position:relative;
top:4px;
left:2px;
}
#topuserbar a
{
color:White;
}
#topuserbar a:hover
{
color:Yellow;
}
/*****************BODY AREA*******************/
#body
{
border: 1px solid red;
min-height:800px;
width:960px;
}
#leftnavigation
{
border: 1px solid green;
min-height:500px;
float:left;
width:190px;
}
#contentarea
{
border:1px solid blue;
min-height:500px;
float:left;
width:590px;
}
#advertisingarea
{
border:1px solid orange;
width:150px;
float:left;
min-height:500px;
}
Could it be because of the cumulative 1 pixel border?
Sergio, I'm not sure if this is going to be the answer but try replacing borders with outlines. Borders have a pixel width whereas outlines don't. This may, possibly, solve your problem.
CSS usage: outline{1px solid red;}
Could it be:
#headershadow
{
background-color:Black;
min-height:2px;
The height and padding above/below the <ul id=topuserbar> is pushing down the second and third divs.
Add height:43px; (or greater) to #header to push elements below it down and that will line up the 3 body divs.
Firebug is your friend!