Simple html edit to make 2 collums 1

Discussion in 'HTML & Website Design' started by ASTRAPI, Mar 2, 2012.

0
  1. #1
    Hello

    How can i make the content of this:

    http://oaxbc.gr/arthra2.html
    Code (markup):
    From 2 collums to 1?

    And i want my text to expand to the right side after it so i can use all space there...

    Also i want the edit to not affect the rest html pages as i want for the 2 collums

    Here is my css:

    *{
margin:0px;
padding:0px;
}
img{border:0px;}
html{
width:100%;
height:100%;
background-color:#030303;
}
body{
width:869px;
padding:0 65px;
margin:0 auto;
height:100%;
position:relative
}
html > body{
height:auto;
min-height:100%;
}
#top{
width:869px;
height:70px;
background-image:url(images/menu_bg2.gif);
background-position:top left;
background-repeat:repeat-x;
}
#menu{
width:869px;
height:70px;
background-image:url(images/top_bg.gif);
background-position:bottom left;
background-repeat:no-repeat;
}
#menu ul{
background-image:url(images/menu_bg.gif);
background-position:bottom left;
background-repeat:no-repeat;
height:42px;
width:768px;
margin:0 auto;
}
#menu li{
height:34px;
float:left;
list-style-type:none;
padding:8px 9px 0 13px;
}
#menu li a{
display:block;
height:34px;
float:left;
}
.but1{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but1.jpg);
}
.but2{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but2.jpg);
}
.but3{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but3.jpg);
}
.but4{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but4.jpg);
}
.but5{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but5.jpg);
}
.but6{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but6.jpg);
}
.but7{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but7.jpg);
}
.but8{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but8.jpg);
}
.but1:hover,.but2:hover,.but3:hover,.but2:hover,.but4:hover,.but5:hover,.but6:hover,.but7:hover,.but8:hover{background-position:bottom left}
#active{
background-position:bottom left
}
#header{
width:869px;
background-image:url(images/photo.jpg);
background-position:top left;
background-repeat:no-repeat;
}
.home{
padding:240px 0 0 0
}
.gallery{
width:852px;
background-image:url(images/footer_bg.gif);
background-position:top left;
background-repeat:no-repeat;
padding:13px 0 8px 17px;
background-color:#0F0F0F;
overflow:hidden
}
.gallery div{
float:left;
margin:0 5px 0 0;
}
.gallery div p{
display:block;
background-color:#1F1F1F;
border-bottom:1px solid #383838;
line-height:16px;
text-align:center;
width:65px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#5E5E5E
}
#wrapper{
width:869px;
padding:6px 0 90px 0;
background-image:url(images/footer_bg.gif);
background-position:top left;
background-repeat:no-repeat;
overflow:hidden;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#9A9A9A;
}
.style1{
margin:8px 0 0 0;
}
#content{
width:869px;
background-color:#090909;
overflow:hidden;
padding:0 0 28px 0;
background-image:url(images/wrapper_bg.gif);
background-position:bottom left;
background-repeat:no-repeat
}
.title{
padding:11px 0 0 0;
height:26px;
margin:0 0 8px 0;
background-image:url(images/title_bg.gif);
background-position:top left;
background-repeat:no-repeat;
}
#left{
width:442px;
float:left;
padding:0 24px 0 17px
}
#left div{
padding:15px 0 0 0;
width:221px;
float:left;
}
#left p{
width:192px;
padding:13px 0 0 0
}
.more{
display:block;
color:#AE2A00;
text-decoration:underline;
margin:2px 0 0 0 
}
.more:visited{text-decoration:underline}
.more:hover{text-decoration:none}
.block{
width:368px;
padding:12px 0 10px 1px;
overflow:hidden
}
.block img{
float:left;
border:1px solid #383838;
margin:0 11px 0 0
}
.block span{
background-color:#000000;
line-height:14px;
color:#29705B;
padding:0 15px 0 5px;
margin:2px 0 8px 0;
display:block;
float:left;
}
.block p{
float:left;
width:200px;
}
#footer{
width:869px;
position:absolute;
bottom:0px;
height:77px;
background-color:#0F0F0F;
background-image:url(images/footer_bg.gif);
background-position:top left;
background-repeat:no-repeat;
font-family:Tahoma, sans-serif;
color:#9A9A9A;
font-size:10px;
}
#footer ul{
width:768px;
height:13px;
background-image:url(images/bot_bg.gif);
background-position:top left;
background-repeat:no-repeat;
width:768px;
height:13px;
margin:20px auto 15px auto;
text-align:center
}
#footer ul li{
display:inline;
}
#footer ul li a{
color:#9A9A9A;
text-decoration:none;
margin:0 9px;
}
#footer ul li a:visited{text-decoration:none}
#footer ul li a:hover{text-decoration:underline}
#footer p{
width:869px;
text-align:center;
font-size:11px;
}
#footer p a{
color:#CE3200;
text-decoration:none
}
#footer p a:visited{text-decoration:none}
#footer p a:hover{text-decoration:underline}
#about{
width:412px;
float:left;
padding:0 21px 0 17px;
}
.pic{
margin:17px 15px 18px 15px;
border:1px solid #383838
}
#about p{
width:375px;
margin:0 0 15px 15px
}
#history{
width:404px;
float:left
}
#history p{
width:375px;
padding:18px 0 0 0
}
.inner_copy{
border:0;
color:#fff;
float:right;
width:0.09%!important;
margin:-100px;
overflow:hidden;
line-height:0px;
padding:0px;
font-size:11px
}
    Code (markup):

    Thank you
     
    ASTRAPI, Mar 2, 2012 IP
  2. czent

    czent Peon

    Messages:
    45
    Likes Received:
    2
    Best Answers:
    5
    Trophy Points:
    0
    #2
    The link provided is not available anymore. Could you repost?
     
    czent, Mar 2, 2012 IP
  3. ASTRAPI

    ASTRAPI Guest

    Messages:
    500
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Ops sorry ..

    Link is ok now :)
     
    ASTRAPI, Mar 2, 2012 IP
  4. czent

    czent Peon

    Messages:
    45
    Likes Received:
    2
    Best Answers:
    5
    Trophy Points:
    0
    #4
    I am thinking if you move all the image & text from 2 separate DIVs that are <div id="about"> & <div id="history"> and put them directly inside <div id="content"> then you will have a 1 column layout, with text filling up all the space.
     
    czent, Mar 2, 2012 IP
  5. czent

    czent Peon

    Messages:
    45
    Likes Received:
    2
    Best Answers:
    5
    Trophy Points:
    0
    #5
    And then if you add float:left to the image you can have a layout like this http://d.pr/xGdi
     
    czent, Mar 2, 2012 IP
  6. ASTRAPI

    ASTRAPI Guest

    Messages:
    500
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Can you please do it for me and send me the hml to test it?

    Thank you
     
    ASTRAPI, Mar 2, 2012 IP
  7. czent

    czent Peon

    Messages:
    45
    Likes Received:
    2
    Best Answers:
    5
    Trophy Points:
    0
    #7
    Sure. It's better if you attach the original HTML page here. Then I will edit & attach back for you. Do it.
     
    czent, Mar 2, 2012 IP
  8. ASTRAPI

    ASTRAPI Guest

    Messages:
    500
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Here it is:

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="/favicon.ico" rel="icon" type="image/x-icon" />
<title>Chania Basketball Team </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="style.css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onLoad="MM_preloadImages('images/pic2r.jpg')">
	<div id="top">
		<div id="menu">
			<ul>
				<li><a href="index.html" class="but1" id="active"><img src="images/spacer.gif" alt="" width="46" height="13" /></a></li>
				<li><a href="omada.html" class="but2"><img src="images/spacer.gif" alt="" width="83" height="13" /></a></li>
				<li><a href="agwnistika.html" class="but3"><img src="images/spacer.gif" alt="" width="76" height="13" /></a></li>
				<li><a href="akadhmies.html" class="but4"><img src="images/spacer.gif" alt="" width="69" height="13" /></a></li>
				<li><a href="nea.html" class="but5"><img src="images/spacer.gif" alt="" width="44" height="13" /></a></li>
				<li><a href="arthra.html" class="but6"><img src="images/spacer.gif" alt="" width="67" height="13" /></a></li>
				<li><a href="xorhgoi-syndesmoi.html" class="but7"><img src="images/spacer.gif" alt="" width="124" height="13" /></a></li>
                                                                <li><a href="epikoinwnia.html" class="but8"><img src="images/spacer.gif" alt="" width="80" height="13" /></a></li>
			</ul>																																																																																															
		</div>
	</div>
	<div id="header" class="home">
		<img src="images/spacer.gif" alt="" width="98" height="17" /><br />
	</div>
	<div id="wrapper">
		<div id="content">																																																																																																																																																															
			<div id="about">
				<img src="images/title7.gif" alt="" width="412" height="37" /><br />
				<img src="images/pic9.jpg" alt="" width="372" height="213" class="pic" /><br />
				<p>Lorem ipsum dolor sit amet, sectetu adip scing varius interdum incid unt quis, libero. Aenean mturpis. Maecenas hendrerit masa laoreet iaculipede mnisl ulamcorper.Tellus er sodales enim, in tincidunt mauris in odio. Massa ac laoreet iaculipede nisl ullamcorpermassa, ac consectetuer feipsum eget pede.  Proin nunc. Donec massa. Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio.  </p>
				<p>massa ac laoreet iaculipede nisl ullamcorpermassa,consectetuer feipsum eget pede. Proin nunc. Donec massa. Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odi. Maecenas hendrerit, massa ac laoreet iaculipedenisl ullamcorpermassa, ac consectetuer feipsum eget pede. Proin nunc. Donec massa. Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio.  massa ac laoreet iaculipede nisl ullamcorpermassa, ac consectetuer feipsum eget pede. Proin nunc. Donec massa. </p>
			</div>
			<div id="history">
				<img src="images/title8.gif" alt="" width="404" height="37" /><br />
				<p><strong>Lorem ipsum dolor</strong> sit amet, sectetu adip scing varius interdum incid unt quis, libero. Aenean mturpis. Maecenas hendrerit masa laoreet iaculipede mnisl ulamcorper. Tellus er sodales enim, in tincidunt mauris in odio. Massa ac laoreet iaculipede nisl ullamcorpermassa, ac consectetuer feipsum eget pede.  Proin nunc. Donec massa. </p>
				<p><strong>Lorem ipsum dolor</strong> sit amet, sectetu adip scing varius interdum incid unt quis, libero. Aenean mturpis. Maecenas hendrerit masa laoreet iaculipede mnisl ulamcorper. Tellus er sodales enim, in tincidunt mauris in odio. Massa ac laoreet iaculipede nisl ullamcorpermassa, ac consectetuer feipsum eget pede.  Proin nunc. Donec massa. </p>
				<p><strong>Lorem ipsum dolor</strong> sit amet, sectetu adip scing varius interdum incid unt quis, libero. Aenean mturpis. Maecenas hendrerit masa laoreet iaculipede mnisl ulamcorper. Tellus er sodales enim, in tincidunt mauris in odio. Massa ac laoreet iaculipede nisl ullamcorpermassa, ac consectetuer feipsum eget pede.  Proin nunc. Donec massa. </p>
				<p><strong>Lorem ipsum dolor</strong> sit amet, sectetu adip scing varius interdum incid unt quis, libero. Aenean mturpis. Maecenas hendrerit masa laoreet iaculipede mnisl ulamcorper. Tellus er sodales enim, in tincidunt mauris in odio. Massa ac laoreet iaculipede nisl ullamcorpermassa, ac consectetuer feipsum eget pede.  Proin nunc. Donec massa. </p>
				<p><strong>Lorem ipsum dolor</strong> sit amet, sectetu adip scing varius interdum incid unt quis, libero. Aenean mturpis. Maecenas hendrerit masa laoreet iaculipede mnisl ulamcorper. Tellus er sodales enim, in tincidunt mauris in odio. Massa ac laoreet iaculipede nisl ullamcorpermassa, ac consectetuer feipsum eget pede.  Proin nunc. Donec massa. </p>
			</div>
		</div>
	</div>
	<div id="footer">
		<ul>
			<li><a href="index.html">ΑΡΧΙΚΗ</a></li>
			<li><a href="omada.html">Η ΟΜΑΔΑ ΜΑΣ</a></li>
			<li><a href="agwnistika.html">ΑΓΩΝΙΣΤΙΚΑ</a></li>
			<li><a href="akadhmies.html">ΑΚΑΔΗΜΙΕΣ</a></li>
			<li><a href="nea.html">ΝΕΑ</a></li>
			<li><a href="arthra.html">ΑΡΘΡΑ</a></li>
			<li><a href="xorhgoi-syndesmoi.html">ΧΟΡΗΓΟΙ-ΣΥΝΔΕΣΜΟΙ</a></li>
			<li><a href="epikoinwnia.html">ΕΠΙΚΟΙΝΩΝΙΑ</a></li>
		</ul>
		<p>Copyright &copy;. All rights reserved. Design by <a href="http://site.com/" target="http://site.com/" title="We design your dreams">Designs-lab</a></p>        																																																																																																																																																								<div class="inner_copy"><a href="http://www.site.info/">beautiful</a><a href="http://www.site.com/">grunge</a></div>
	</div>
</body>
</html>
    Code (markup):
    Thank you
     
    ASTRAPI, Mar 2, 2012 IP
  9. czent

    czent Peon

    Messages:
    45
    Likes Received:
    2
    Best Answers:
    5
    Trophy Points:
    0
    #9
    czent, Mar 2, 2012 IP
  10. ASTRAPI

    ASTRAPI Guest

    Messages:
    500
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Working great thanks :)
     
    ASTRAPI, Mar 2, 2012 IP