Trying to create a webpage and I'm having a bit of trouble with the divs. The site that this code is for is similar to the old Myspace, so I can't use CSS in the code. I'm trying to create some tables using DIV, and I'm having some issues.
This is how my page looks so far.
What I'm trying to do is get the gray DIV inside the blue DIV, the blue keeps cutting off, and I don't know what I'm doing wrong. It's probably obvious and I'm probably an idiot for not seeing the problem. I'm not sure what to do about it though.
This is my code:
<center>
<!-- This template was created by the Angry Hobbit -->
<div style="width:540px; background-color:#eefbfd; padding:25px; border:1px solid #d5d6d6;">
<font style="width:485px; display:block; background-color:#eeefef; margin:14px; font-family: times; font-size:39px; font-color:#000000; font-weight:bold;">FIRST MIDDLE LAST</font>
<img src="https://i.imgur.com/tljLCuq.gif" width:150px; height:150px;">
<img src="https://i.imgur.com/tljLCuq.gif" width:150px; height:150px;">
<img src="https://i.imgur.com/tljLCuq.gif" width:150px; height:150px;">
<font style="width:485;display:block; background-color:#eeefef; margin-top:10px; margin-bottom:10px; font-family:times; font-size:22px; font-weight:lighter; font-style:italic; letter-spacing:-1px;">» some facts</font>
<div style="width:239px; display:inline; float:left; background-color:#eeefef; margin-top:14px; padding:14px;">
<font style="display:block; font-family:times; font-weight:lighter; font-size:15px; font style:bold; border-top:1px dotted #8ca8ac; border-bottom: 1px dotted #8ca8ac;">basic facts</font><br>
<font style="display:block; text-align:left;font-family:times; font-weight:lighter; font-size:9px;">
<b style="background:#d1d3d3;">NAME:</b><br>
<b style="background:#d1d3d3;">AGE:</b><br>
<b style="background:#d1d3d3;">D.O.B:</b><br>
<b style="background:#d1d3d3;">BIRTHPLACE:</b><br>
<b style="background:#d1d3d3;">CURRENT LOCATION:</b><br>
<b style="background:#d1d3d3;">OCCUPATION:</b><br>
<b style="background:#d1d3d3;">ETHNICITY:</b><br>
<b style="background:#d1d3d3;">MARITAL STATUS:</b><br>
<b style="background:#d1d3d3;">SIGNIFICANT OTHER:</b><br>
</div>
`
First thing, you are using CSS it's just inside your HTML. You really should create a .css file and link it with <link>. It would simplify your life and make your code much more readable.
Second, making a div be float remove it from the flow of the page. More info here.
I think this is what you wanted :
<center>
<!-- This template was created by the Angry Hobbit -->
<div style="width:540px; background-color:#eefbfd; padding:25px; border:1px solid #d5d6d6;">
<font style="width:485px; display:block; background-color:#eeefef; margin:14px; font-family: times; font-size:39px; font-color:#000000; font-weight:bold;">FIRST MIDDLE LAST</font>
<img src="https://i.imgur.com/tljLCuq.gif" width:150px; height:150px;">
<img src="https://i.imgur.com/tljLCuq.gif" width:150px; height:150px;">
<img src="https://i.imgur.com/tljLCuq.gif" width:150px; height:150px;">
<font style="width:485;display:block; background-color:#eeefef; margin-top:10px; margin-bottom:10px; font-family:times; font-size:22px; font-weight:lighter; font-style:italic; letter-spacing:-1px;">» some facts</font>
<div style="width:239px; display:block; background-color:#eeefef; margin-top:14px; padding:14px;">
<font style="display:block; font-family:times; font-weight:lighter; font-size:15px; font style:bold; border-top:1px dotted #8ca8ac; border-bottom: 1px dotted #8ca8ac;">basic facts</font><br>
<font style="display:block; text-align:left;font-family:times; font-weight:lighter; font-size:9px;">
<b style="background:#d1d3d3;">NAME:</b><br>
<b style="background:#d1d3d3;">AGE:</b><br>
<b style="background:#d1d3d3;">D.O.B:</b><br>
<b style="background:#d1d3d3;">BIRTHPLACE:</b><br>
<b style="background:#d1d3d3;">CURRENT LOCATION:</b><br>
<b style="background:#d1d3d3;">OCCUPATION:</b><br>
<b style="background:#d1d3d3;">ETHNICITY:</b><br>
<b style="background:#d1d3d3;">MARITAL STATUS:</b><br>
<b style="background:#d1d3d3;">SIGNIFICANT OTHER:</b><br>
</div>
</div>
You need to close off the second div, remove the float:left and display it as a block. margin-right:auto works well for blocks.
<center>
<!-- This template was created by the Angry Hobbit -->
<div style="width:540px; background-color:#eefbfd; padding:25px; border:1px solid #d5d6d6;">
<font style="width:485px; display:block; background-color:#eeefef; margin:14px; font-family: times; font-size:39px; font-color:#000000; font-weight:bold;">FIRST MIDDLE LAST</font>
<img src="https://i.imgur.com/tljLCuq.gif" width:150px; height:150px;">
<img src="https://i.imgur.com/tljLCuq.gif" width:150px; height:150px;">
<img src="https://i.imgur.com/tljLCuq.gif" width:150px; height:150px;">
<font style="width:485;display:block; background-color:#eeefef; margin-top:10px; margin-bottom:10px; font-family:times; font-size:22px; font-weight:lighter; font-style:italic; letter-spacing:-1px;">» some facts</font>
<div style="width:239px; display:block; background-color:#eeefef; margin-top:14px; padding:14px;margin-right:auto;">
<font style="display:block; font-family:times; font-weight:lighter; font-size:15px; font style:bold; border-top:1px dotted #8ca8ac; border-bottom: 1px dotted #8ca8ac;">basic facts</font><br>
<font style="display:block; text-align:left;font-family:times; font-weight:lighter; font-size:9px;">
<b style="background:#d1d3d3;">NAME:</b><br>
<b style="background:#d1d3d3;">AGE:</b><br>
<b style="background:#d1d3d3;">D.O.B:</b><br>
<b style="background:#d1d3d3;">BIRTHPLACE:</b><br>
<b style="background:#d1d3d3;">CURRENT LOCATION:</b><br>
<b style="background:#d1d3d3;">OCCUPATION:</b><br>
<b style="background:#d1d3d3;">ETHNICITY:</b><br>
<b style="background:#d1d3d3;">MARITAL STATUS:</b><br>
<b style="background:#d1d3d3;">SIGNIFICANT OTHER:</b><br>
</div>
</div>
Don not use heavy css style in inline-text, use row and column to space not br and do not give div css give it a class with css. and give the blue box some height, 500px covered that area.
.wbpb {
width:540px;
height:500px;
background-color:#eefbfd;
padding:25px;
border:1px solid #d5d6d6;
}
.middle-last{
width:485px;
display:block;
background-color:#eeefef;
margin:14px;
font-family: times;
font-size:39px;
font-color:#000000;
font-weight:bold;"
}
.img{
width:150px;
height:150px;
}
.fact-p{
width:485;
display:block;
background-color:#eeefef;
margin-top:10px;
margin-bottom:10px;
font-family:times;
font-size:22px;
font-weight:lighter;
font-style:italic;
letter-spacing:-1px;"
}
.float-p{
width:239px;
display:inline;
float:left;
background-color:#eeefef;
margin-top:35px;
padding:14px;
}
.font-times{
display:block;
font-family:times;
font-weight:lighter;
font-size:15px;
font style:bold;
border-top:1px dotted #8ca8ac;
border-bottom: 1px dotted #8ca8ac;
}
.block-p{
display:block;
text-align:left;
font-family:times;
font-weight:lighter;
font-size:9px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<center>
<div class="wbpb">
<p class="middle-last">FIRST MIDDLE LAST</p>
<img src="https://i.imgur.com/tljLCuq.gif">
<img src="https://i.imgur.com/tljLCuq.gif">
<img src="https://i.imgur.com/tljLCuq.gif">
<div class="fact-p">» some facts</div>
<div class="float-p">
<p class="font-times">basic facts</p><br>
<div class="block-p">
<div class="row">
<div class="column">
<b style="background:#d1d3d3;">NAME:</b>
</div>
<div class="column">
<b style="background:#d1d3d3;">AGE:</b>
</div>
<div class="column">
<b style="background:#d1d3d3;">D.O.B:</b>
</div>
<div class="column">
<b style="background:#d1d3d3;">BIRTHPLACE:</b>
</div>
<div class="column">
<b style="background:#d1d3d3;">CURRENT LOCATION:</b>
</div>
<div class="column">
<b style="background:#d1d3d3;">OCCUPATION:</b>
</div>
<div class="column">
<b style="background:#d1d3d3;">ETHNICITY:</b>
</div>
<div class="column">
<b style="background:#d1d3d3;">MARITAL STATUS:</b>
</div>
<div class="column">
<b style="background:#d1d3d3;">SIGNIFICANT OTHER:</b>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I'm trying to center (align horizontally) a button on my email template. Here is my current code:
<p class="product-link" style="text-align:left; width:60%; display:inline-block; vertical-align:middle;">
<span>
<a style="color:#000000; background:#F4D079; padding:10px 15px; display:inline-block; margin-bottom:10px; text-decoration:none; border-radius:5px; font-size:14px;" href="https://www.amazon.com/review/review-your-purchases/ref=?_encoding=UTF8&asins=[[PRODUCT_ASIN]]">Share your opinion</a>
</span>
<br>
</p>
I know this is an amateur question and I apologize, I've tried a million things and haven't gotten anything to work.
Removed unnecessary styles (width:60%; display:inline-block;),and added style to center the button(text-align: center;).
<p class="product-link" style="text-align: center;vertical-align:middle;">
<span><a style="color:#000000; background:#F4D079; padding:10px 15px; display:inline-block; margin-bottom:10px; text-decoration:none; border-radius:5px; font-size:14px;" href="https://www.amazon.com/review/review-your-purchases/ref=?_encoding=UTF8&asins=[[PRODUCT_ASIN]]">Share your opinion</a></span><br>
<script type="text/javascript">
</script>
</p>
Set the parent element to display block and the button to margin-left and margin-right auto :)
I am attempting to center images located in my HTML code as they are currently all showing to the left side. This is within the program Infusionsoft, so not sure if it's just the system that won't let me center with everything I have tried, or if I'm just doing it incorrectly. Any push in the right direction would be helpful.
<div style="width:1000px; height:1000px; border:0px; padding:0px;">
<a href="ImageLocation1">
<img alt="single.png" src="ImageSource1" style="width:280px; height:614px; border:0px solid blue; float:left;" />
</a>
<a ImageLocation2">
<img alt="Corporate.png"src="ImageSource3" style="width:280px; height:614px; border:0px solid blue; float:left;" />
</a>
<a ImageLocation3">
<img alt="partner.png" src="ImageSource2" style="width:280px; height:614px; border:0px solid blue; float:left;" />
</a>
</div>
There are two different ways of centering your images, individually, or as a group.
Individual:
<div style="width:200px; height:200px; border:2px solid red; padding:0px;">
<a href="ImageLocation1">
<img alt="single.png" src="ImageSource1" style="width:48px; height:61px; border:0px solid blue; display:block; margin:0 auto;" />
</a>
<a href="ImageLocation2">
<img alt="Corporate.png" src="ImageSource3" style="width:48px; height:61px; border:0px solid blue; display:block; margin:0 auto;">
</a>
<a href="ImageLocation3">
<img alt="partner.png" src="ImageSource2" style="width:48px; height:61px; border:0px solid blue; display:block; margin:0 auto;"/>
</a>
</div>
Added display: block and margin: 0 auto to each image
Group:
<div style="width:200px; height:200px; border:2px solid red; padding:0px;text-align:center">
<a href="ImageLocation1">
<img alt="single.png" src="ImageSource1" style="width:48px; height:61px; border:0px solid blue;" />
</a>
<a href="ImageLocation2">
<img alt="Corporate.png" src="ImageSource3" style="width:48px; height:61px; border:0px solid blue;">
</a>
<a href="ImageLocation3">
<img alt="partner.png" src="ImageSource2" style="width:48px; height:61px; border:0px solid blue;" />
</a>
</div>
Added text-align: center to the wrapper
Fiddle: https://jsfiddle.net/4mnLLxz7/
I changed your height and widths to better present the fiddle, you only need to edit those back to what they were originally.
If you do not wish to use display: block then you can look into flex which is a great tool.
CSS | Flex
I am having a problem with my code, every time I try to align the text such as Location and have all the address, phone#, etc under it but every time I try too, the text just overlap and such.
Here is my code-
https://jsfiddle.net/6LLn2yjt/1/
Pretty much I want something like this http://imgur.com/s8pQZsB
Can someone explain too me what my problem is and how I can fix this? The code also overlaps my footer for some reason?
HTML
<div class="Location">
<p>
<span class="Location" style="text-align:center;">Location</span>
</p>
</div>
<div class="LocationElement">
<p>
<font color="black" face="tahoma, geneva, sans-serif">
<span style="font-size:20px;"> 5000 Willy Wooly Drive </span>
</font>
</p>
<p>
<font color="black" face="tahoma, geneva, sans-serif">
<span style="font-size:16px;"> Office:(111) 111.1111 </span>
</font>
</p>
<p>
<font color="black" face="tahoma, geneva, sans-serif">
<span style="font-size:16px;"> Fax: (111) 111.1111 </span>
</font>
</p>
<p>
<font color="black" face="tahoma, geneva, sans-serif">
<span style="font-size:16px;"> Email: fake#fake.com </span>
</font>
</p>
</div>
<div class="Hours">
<p>
<span class="Hours" style="text-align:center;">Hours</span>
</p>
</div>
<div class="HoursElement">
<p>
<span class="fontSize" style="font-size:16px;">
<font color="black" face="tahoma, geneva, sans-serif">
Mon-Fri: 9am-7pm</font>
</span>
</p>
<p>
<span class="fontSize" style="font-size:16px;">
<font color="black" face="tahoma, geneva, sans-serif">
Sat-Sun: CLOSED</font>
</span>
</p>
</div>
CSS
.Location
{font-size: 30px;
display: inline-block;
float:left;
white-space:nowrap;
}
.Hours
{
font-size: 30px;
display: inline-block;
float:right;
white-space:nowrap;
}
.LocationElement
{
float:left;
white-space:nowrap;
}
.HoursElement
{
float:right;
white-space:nowrap;
}
your nesting is incorrect: https://jsfiddle.net/6LLn2yjt/2/
your div closes just before its elements.
<div class="Location">
<p>
<span class="Location" style="text-align:center;">Location</span>
</p>
<div class="LocationElement">
<p>
<font color="black" face="tahoma, geneva, sans-serif">
<span style="font-size:20px;"> 5000 Willy Wooly Drive </span>
</font>
</p>
This willl work with your code as seen in the fiddle.
Try my trial.
In function to your page, change:
1- For .main -> width value
2- For: .Location section, .Hours section -> height and width values
3- For: .Location header, .Hours header -> the padding-left value
<style>
.main
{
display:block;
width:65%;
margin:0 auto;
padding:0;
}
.Location,.Hours
{
display:block;
float:left;
}
.Location
{
width:65%;
}
.Hours
{
width:34%;
}
.Location header, .Hours header
{
display:block;
font-size:30px;
width:65%;
margin:0 auto;
padding-left:30px;
}
.Location section, .Hours section
{
display:block;
min-height:200px;
clear:both;
width:65%;
margin:0 auto;
}
.Location section p, .Hours section p
{
padding:3px;
margin:10px;
font-family:tahoma, geneva, sans-serif;
font-size:16px;
font-weight:bold;
}
.Location section p span
{
font-weight:normal;
}
.Location section p span.title
{
font-size:20px;
font-weight:bold;
}
</style>
<section class="main">
<article class="Location">
<header>Location</header>
<section>
<p><span class="title">5000 Willy Wooly Drive</span></p>
<p>Office: <span>(111) 111.1111</span></p>
<p>Fax: <span>(111) 111.1111</span></p>
<p>Email: <span>fake#fake.com</span></p>
</section>
</article>
<article class="Hours">
<header>Hours</header>
<section>
<p>Mon-Fri: 9am-7pm</p>
<p>Sat-Sun: CLOSED</p>
</section>
</article>
<div class="clear"></div>
</section>
I have a title with html code:
<div id="site-title">
<a rel="home" > book Journey</a>
</div>
No i want to insert a small pic infront of this book journey, how can i do it.
You can use <span> inline elements to work with text along with images
HTML
<div id="site-title">
<a rel="home" ><img src="imageurl"/><span>book Journey</span></a>
</div>
CSS
img,span{
vertical-align:middle;
}
Fiddle
Why don't you use an Image tag for the link.
<img src="/path_to_img"/><span>book journey</span>
Try this:
<div id="site-title">
<a rel="home" >
<img style="float:left;" src="path-of-your-image/image.jpg" />
book Journey
</a>
</div>
Here is the answer you asked for ,
http://jsfiddle.net/Manjuboyz/vJS4m/133/
<div id="first">
<div id="text"> Book Journey
</div>
<div id="img"><img src="~/Images/doctor-landing.png" style="height: 100%; width: 100%;" </div>
</div>
CSS for above
#first{
height:35px;
width:150px;
border:1px solid brown;
}
#text{
height:30px;
width:100px;
border:1px solid black;
float:left;
}
#img{
height:30px;
width:30px;
margin-left:110px;
border:1px solid teal;
}
NOTE:
Change the image to left or right as you needed
UPDATE
Responsive Screen
So I am creating my own website for the first time and after a bunch of problems, I've ran into one I am unsure of how to fix.
ngkevin-art.com/about.html
This is how it looks like in Dreamweaver and how I want it to look:
http://i.imgur.com/wlOIR.jpg
But when I go into Live View, or see it online, it falls apart. Any help would be appreciated.
CSS:
#charset "utf-8";
/* CSS Document */
/* General HTML Tag Rules */
body {
width:auto;
height:auto;
background-image:url(images/bg_demo2.png);
background-color:#2d2d2d;
background-repeat:no-repeat;
background-position:center;
margin-top:30px;
}
#font-face {
font-family: Harabara;
src: url(Harabara.ttf);
font-weight:200;
}
h1 {
font-family: Harabara, Helvetica, Arial, sans-serif;
font-size:150%;
color:#CECEBC;
}
h2 {
font-family: Harabara, Helvetica, Arial, sans-serif;
font-size:100%;
color:#CECEBC;
}
.text {
margin-left:75px;
width:auto;
float:left;
}
#text2 {
width:408px;
text-align:center;
}
.text3 {
margin-left:25px;
width:auto;
float:left;
}
#container {
width:1280px;
height:960px;
margin-left:auto;
margin-right:auto;
}
#wrapContact {
width: 520px;
height: 100px;
margin-left:735px;
margin-top: 10px;
clear: both;
}
#linked {
float:left;
margin-top:35px;
width: 175px;
}
#facebook {
float:left;
width: 200px;
margin-left:32px;
margin-top:25px;
}
#email {
float:left;
width:75px;
margin-left:35px;
margin-top:20px;
}
#wrapNav {
width: 475px;
margin-left:750px;
margin-top:60px;
}
#demo {
width: 500px;
text-align:center;
margin-top: 70px;
margin-left:auto;
margin-right:auto;
}
#flatbook {
width:250px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
}
#wrapAbout {
margin-left:auto;
margin-right:auto;
margin-top:75px;
width: 1100px;
height:auto;
}
#picture {
width:408px;
margin-top:100px;
float:left;
}
HTML:
<body>
<div id="container">
<div id="wrapContact">
<div id="linked">
<a href="http://www.linkedin.com/pub/kevin-ng/25/558/75b">
<img src="images/logo_linked_large.png" width="auto" height="auto" border="0" alt="linkedin_logo" /> </a>
</div>
<div id="facebook">
<a href="http://www.facebook.com/profile.php?id=1309131548">
<img src="images/logo_fb_large.png" width="auto" height="auto" border="0" alt="facebook_logo" /> </a>
</div>
<div id="email">
<a href="mailto: ngkevin.3dartist#gmail.com">
<img src="images/gmail.png" width="auto" height="auto" border="0" alt="email_icon" /> </a>
</div>
</div> <!-- End "wrapContact"> -->
<div id="wrapNav">
<a href="index.html">
<img src="images/bg_tab_main.png" width="auto" height="auto" border="0" alt="Main" /> </a>
<a href="demo.html">
<img src="images/bg_tab_demo.png" width="auto" height="auto" border="0" alt="Demo" /> </a>
<a href="about.html">
<img src="images/bg_tab_about.png" width="auto" height="auto" border="0" alt="About" /> </a>
</div>
<!-- End "wrapNav"> -->
<div id="wrapAbout">
<div id="picture">
<img src="images/picture.jpg" width="auto" height="auto" alt="picture" />
<div id="text2">
<h2> Me in the middle left, my buddies, Jordan Gabriel on the left and Edmund Zhu on the right,
and finally, Epic Games VIP, Cliff Bleszinski! Taken at GDC 2010. </h2>
</div>
</div>
<div class="text">
<h1> Resume: <br/>
<br/> Email: <br/> <br/>
<br/> About Me:</h1>
</div>
<div class="text3">
<h1> Click Here
<br/> <br/> ngkevin.3dartist#gmail.com <br/>
<br/> <br/> <font size="4">
My desire to be in the game development industry is to work with other individuals that take pride in creating a game,
something that can be enjoyed by a multitude of people. There is nothing I would like better than to lend my talents and
artistic skills for that purpose. <br/> <br/>
I believe the key to creating memorable game art, whether it be characters or environments, is the story.
Just like reading a good book or watching a thrilling movie, I loved to be immersed in the world of the game. As a result,
I had an affinity to Role-Playing Games. Classic games of my generation such as Chrono Trigger, Final Fantasy, and Zelda
showed me a world of endless imagination. <br/> <br/>
The characters which are the focal point of the story, their goals and motivations, their trials and tribulations,
their victories and defeats... These are the things I think about constantly when I look at them.
A character without depth doesn't exist, but if they do, I can only imagine how boring that would be. </font></h1>
</div>
</div>
</div><!-- End "container" -->
</body>
Try giving your .text3 class a fixed width. 450px looks about right.