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
}
Related
I am putting in new code as I have been studying, Hopefully this is a clearer picture of what my goal is.
I want to go from a table based to a div setup, I have tried
<div class="image"></div>
with this CSS
div.image:before {
content:url(http://placehold.it/350x150);
}
But I am unsure of the placement of the text, also putting an image in the div as well as making sure the dimension is correct.
HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>My Site</title>
<meta http-equiv="Content Type" content="text/html; charset=utf-8" />
<style type="text/css">
.bgimg {
background-image: ('file:///C:/Location/somimg.jpg');
}
</style>
</head>
<body>
<img src="somimg.jpg" width="246" height="94" alt="sm pic'/>
<div class="bgimg">
</div>
<div class="mainsection">
</div>
</body>
</html>
CSS code:
td {
text-align: left;
vertical-align: top;
font-family:Tahoma;
font-weight: bold;
font-size:15px;
color: #E5E5E5;
}
.div-with-bg
{
width: 263px;
height: 94px;
background-image:url('smpic.jpg');
margin:0;
padding:0;
}
a {
text-decoration: underline;
color:#9D5FBB;
}
A:Hover {
color : #DBACF2;
text-decoration : underline;
}
h1 {
color: #9929bd;
font-weight: normal;
font-size: 20px;
font-family: Tahoma;
}
H3 {
color: #7F409E;
font-weight: bold;
font-size : 20px;
font-family:Tahoma;
}
My goal is to have the div's go out to the edge of the browsers as I have multiple tables that I would like to replace with div elements. I have viewed this setup in a browser and the div and image show up but not at the edge of the page.
I don't know if I understand what you're asking but I just copied your HTML in Sublime text, and did this for css:
div.image:before {
width: 263px;
height: 94px;
background-image:url('somepic.jpg');
content:url(http://placehold.it/350x150);
margin:0;
padding:0;
}
It works for me. I have the left div on the left and the right div next to it.
Also, I would the the style of the divs in the css file:
div.right {
float: "middle"
}
div.left {
float: "left";
}
And for the HTML:
<body>
<div class="image left">Left Div</div>
<div class="right"">Right Div</div>
</body>
And if you want to make your life easier just learn flexbox. The way i learned it was using this site.
.container{
display:flex;
}
<div class="container">
<div>
<img src="http://placehold.it/350x150" />
</div>
<div>
RIGHT
</div>
</div>
This is one way to do it.
However i think that you should change the question into how i can learn to design in the browser (e.g. https://hackernoon.com/css-box-model-45ecf4ac219e) or something like that.
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;
}
I'm trying to get the shoutbox on www.talkjesus.com (vBulletin forum) to float left while the verse of the day (orange) to float on the very right side of the shoutbox. I've tried so many variations but it's not working, I'm stuck. Your help appreciated.
The forumhome template code I'm using now is:
<div class="blockbody formcontrols floatcontainer">
<div id="wgo_onlineusers" class="wgo_subblock">
<h3 class="blocksubhead" style="background-color:#82BA1B; color: #fff !important; font-size: 22px; font-weight: 300">shoutbox</h3>
<div style="text-align: center; line-height: 0" class="blockrow">
<div><iframe frameborder="0" width="100%" height="200" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain1-439"" id="cboxmain1-439" style="border-bottom: 1px solid #e4e4e4;"></iframe></div>
<div style="position:relative"><iframe frameborder="0" width="350" height="70" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=form&nme={vb:raw cboxnme}&nmekey={vb:raw cboxkey}&pic={vb:raw cboxav}&lnk={vb:raw cboxav}" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform1-439" id="cboxform1-439"></iframe></div>
</div>
</div>
</div>
<br />
<div class="blockbody formcontrols floatcontainer">
<div id="wgo_onlineusers" class="wgo_subblock">
<h3 class="blocksubhead" style="background-color:#E66B1B; color: #fff !important; font-size: 22px; font-weight: 300">verse of the day</h3>
<div>
<div style="font-size:16px; line-height:28px; padding:10px; color: #797979">
<script type="text/javascript" src="http://www.christnotes.org/syndicate.php?content=dbv&type=js2&tw=auto&tbg=ffffff&bw=0&bc=000000&ta=L&tc=43A6DF&tf=Open Sans&ts=14&ty=B&va=L&vc=43A6DF&vf=Open Sans&vs=12&tt=3&trn=NASB"></script>
</div>
</div>
</div>
</div>
relevant CSS code...
/* Auto-clearing of floats */
.floatcontainer:after,
.formcontrols .blockrow:after,
dl.stats:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.floatcontainer,
.formcontrols .blockrow,
dl.stats {
display:inline-block;
font-weight:normal;
}
/* IE-Mac hide \*/
* html .floatcontainer,
.formcontrols .blockrow,
dl.stats {
height:1%;
}
.floatcontainer,
.formcontrols .blockrow,
dl.stats {
display:block;
}
.blockrow {
padding:12px;
}
.blocksubhead {
padding:12px;
}
.blockhead_info, .blocksubhead_info {
float:right;
font-weight:normal;
}
Have you tried applying the float property to the .floatcontainer element?
.floatcontainer {
width: 50%;
float: left;
}
Setting the width property will be necessary here because the output of the script in the second .floatcontainer block adds a div element to the document which has a width of 100%. Take a look at the output here: http://goo.gl/Bw7iaD (see inline styles of first element). This makes the verse box span full-width unless it's parent container has a specified width.
Here is an example of the working code: http://cdpn.io/0dfce502ffdc99f54a159f7a563ed4fe
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.
I have a top nav that extends across the page
Within that top nav I have various elements
two that must align left
one that must align right
The nav is fluid the elements are fixed widths
Do not want the elements to wrap when the browser window is minimized
Needs to work in IE6 on up due to high Chinese audience.
See example here:
http://jsfiddle.net/4SUwg/
<div id="header">
<div id="headerContent">
<div class="search-list"> Search List </div>
<div class="social-buttons"> Social </div>
<div class="signin"> Login Drop Down </div>
</div>
</div>
I would like the div elements within the nav to not wrap. I searched around on stack and could find answers that come close but nothing that completely addressed the issue. My need to have the div element aligned right complicates matters. Must work in all browsers, especially IE's.
Thanks all for your help in advance!!!
Use SPAN .. It's INLINE and not BLOCK ??
<div id="header">
<div id="headerContent">
<span class="search-list"> Search List </span>
<span class="social-buttons"> Social </span>
<span class="signin"> Login Drop Down </span>
</div>
</div>
And your CSS, remove floats
<style>
body {
margin:0;
padding:0;
}
#header {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
overflow-x:auto; overflow-y:hidden;
}
#headerContent {
height: 32px;
border:1px dashed #fff;
}
.search-list {
width:150px;
background:#039;
}
.social-buttons {
width:150px;
background:#060;
}
.signin {
width:200px;
background:#F00;
}
You want a fluid layout but the most important rule of a fluid layout is not to set a definite width of elements but you have set the width.
The CSS have a <style> tag, which is not required, probably you put it by mistake.
I have set the width of divs inside headerContent in percentage value. The CSS is
body {
margin:0;
padding:0;
}
#header {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
overflow-x:auto; overflow-y:hidden;
}
#headerContent {
height: 32px;
border:1px dashed #fff;
}
.search-list {
width:28%;
float:left;
background:#039;
}
.social-buttons {
width:28%;
float:left;
background:#060;
}
.signin {
width:28%;
float:right;
background:#F00;
}
Just changed the width value and on my browser it looked fine, better than the before version. Here's a fiddle http://jsfiddle.net/DeepakKamat/s52Hn/8/
I found a solution that works in all browsers, specifically IE6 on up since that was a requirement for this project. If you have something better that accomplishes the same thing please post! My sincere thanks to everyone who answered/helped.
<div id="header2">
<table id="headerContent2">
<tr>
<td id="left" valign="top">
<div id="leftWrapper">
<div class="search-list2">Search List</div>
<div class="social-buttons2">Social Buttons</div>
</div>
</td>
<td id="middle"> </td>
<td id="right" valign="top">
<div class="signin2">Login Drop Down</div>
</td>
</tr>
</table>
</div>
<style>
#header2 {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
}
#headerContent2 {
width:100%;
}
#headerContent2 td {
height: 32px;
padding:0;
margin:0;
}
.search-list2 {
width:150px;
float:left;
background:#039;
}
.social-buttons2 {
width:200px;
float:left;
background:#060;
}
.signin2 {
background:#F00;
float:right;
width:400px;
}
#leftWrapper {
width:400px;
}
#middle {
width:100%;
}
</style>
See Demo of it working here. Copy the code and try it out in all the IE's since JSfiddle does not work in all IE's.
http://jsfiddle.net/GtXKE/