SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: help required

  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help required

    Could someone help me with a website. what is the code so that I make a border in the middle of the page and then the information to be stored inside that box ? can someone help this is an eg in a image.

    web.jpg

  2. #2
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,173
    Mentioned
    233 Post(s)
    Tagged
    1 Thread(s)
    Regarding the line... depending of the type of line you want (if it is horizontal, vertical or a free form as you posted...) there are different ways.

    For a free form, you will need a picture and place it inside the box (probably as a background picture) and then place it

    Use CSS for that. CSS properties like position, top, left and background should get you sorted.

    For a vertical or horizontal line... if it is the border of the box, you simply need to use the CSS property border (that would be for all top, bottom, left and right borders) or border-top, border-left, etc. if you simply one of them.

  3. #3
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm.. Should I paste the code ? because I am new to the web development and I would like someone to maybe edit the code and input the info inside the border?

  4. #4
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,480
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    html, body {height:100%;margin:0;padding:0;}
    body  {
    	background:#fff;
    	color:#000;
    	font-size:12px;
    	font-family: Arial, Helvetica, sans-serif;
    }
    .myDiv {
    	position:absolute;
         width:600px;
         height:300px;
         z-index:15;
         top:50%;
         left:50%;
         margin:-150px 0 0 -300px; /* Half the dimensions of the box */
         border:5px solid #000; 
    }
    .myform {
    	margin:40px 100px;
    }
    -->
    </style>
    </head>
    
    <body>
    	<div class="myDiv">
    		<div class="myform">
    			<form id="form1" name="form1" method="post" action="">
    			  <label>Your full name:<br />
    			    <input type="text" name="name" id="name" />
    				  </label><br />
    				  <label>E-mail<br />
    			    <input type="text" name="email" id="email" />
    				  </label>
    			</form>
    			<p> Note: Please make sure....</p>
    		</div>
    	</div>
    </body>
    </html>
    I hope this helps, with little tweaks should be what you need

  5. #5
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,173
    Mentioned
    233 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by aziz09 View Post
    Hmm.. Should I paste the code ? because I am new to the web development and I would like someone to maybe edit the code and input the info inside the border?
    You can always do that (code always help) or you can follow the advice that @webcosmo ; has given you so kindly

  6. #6
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    final help

    Hello. I need help for final time. the code to move the map to that specific location that is on the image shown

    hard.jpg

    the code for this is :

    <iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Cv10+7xx&amp;aq=&amp;sll=51.510538,-0.595041&amp;sspn=0.182691,0.528374&amp;ie=UTF8&amp;hq=&amp;hnear=CV10,+United+Kingdom&amp;t=m&amp;ll=52.532827,-1.519203&amp;spn=0.031327,0.051498&amp;z=13&amp;iwloc=A&amp;output=embed"></iframe>

  7. #7
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,173
    Mentioned
    233 Post(s)
    Tagged
    1 Thread(s)
    First, put the iframe inside the box. Then simply add to your CSS

    Code:
    iframe{
    position: relative; 
    bottom: 0,5em; 
    right:0,5em
    }

  8. #8
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know how I did put the code into body then used css code and nothing happened


    Quote Originally Posted by molona View Post
    First, put the iframe inside the box. Then simply add to your CSS


    Code:
    iframe{
    position: relative; 
    bottom: 0,5em; 
    right:0,5em
    }

  9. #9
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,173
    Mentioned
    233 Post(s)
    Tagged
    1 Thread(s)
    can you post your html?

  10. #10
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by molona View Post
    can you post your html?
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">

    html, body {height:100%;margin:0;padding:0;}
    body {
    background:#fff;
    color:#000;
    font-size:13px;
    font-family: Arial, Helvetica, sans-serif;
    background-image:url('backgtround2.jpg');
    background-repeat: no-repeat;
    background-position:50% 0px;
    background-color:#969696;







    </style>
    </head>

    <body>
    <div id="iframe">
    </br>
    <iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="1" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Cv10+7xx&amp;aq=&amp;sll=51.510538,-0.595041&amp;sspn=0.182691,0.528374&amp;ie=UTF8&amp;hq=&amp;hnear=CV10,+United+Kingdom&amp;t=m&amp;ll=52.532827,-1.519203&amp;spn=0.031327,0.051498&amp;z=13&amp;iwloc=A&amp;output=embed"></iframe>



    </div>
    </body>
    </html>

  11. #11
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,173
    Mentioned
    233 Post(s)
    Tagged
    1 Thread(s)
    Sorry I didn't reply sooner. I had a pretty busy weekend.

    It has been my mistake and I do apologize. The position needs to be absolute. Relative means in relation to the space that the object would be if it wasn't moved while absolute is in relation of the first container that has a position. And if no container has a position, like in this case, that would be in relation to the root element


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •