I have the following HTML:
<!DOCTYPE html>
<HTML>
<HEAD>
<style type="text/css">
.name {
font-size: 18px;
margin-top: 1px;
text-align: right;
}
.contactInfo {
font-size: 12px;
margin-top: 1px;
text-align: left;
}
</style>
<TITLE>Joe Sixpack</TITLE>
</HEAD>
<BODY>
<div id="name">
<span class="name">Joe Sixpack</span>
</div>
<div id="contactInfo">
<span class="contactInfo">
123 Electric Ave, Mudflap, NS 12345 • (888) 555-1212 • Joe#Sixpack.com
</span>
</div>
<HR>
</BODY>
</HTML>
The problem is that I would like the name class to be aligned to the right but it is not happening. Both the name and the address are on the left. Why is that and how do I fix it?
Set the style on the name div, not the name span:
#name {
font-size:18px;
margin-top:1px;
text-align:right;
}
Also, you might not want to have divs and spans with the same name.
You can align text only inside block-level elements. Rewrite you CSS to be like that:
#name {
font-size:18px;
margin-top:1px;
text-align:right;
}
#contactInfo {
font-size:12px;
margin-top:1px;
text-align:left;
}
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'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
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 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/
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
}