Html & css help

GigaGreg · Feb 19, 2014

Hey guys!

I have such a weird problem with css & html. As you can see on the demo, there are divs that are at the top of the page and should be below the div content area. I am developing a Joomla 2.5 template and making html first as i have all template ready, but i need css and html.

http://emnowiny.co.uk/test/index.html

Html:

Code:

<?php
<head>
		<link rel="stylesheet" href="css/template.css" type="text/css" />
	
</head>

<body>

		<div id="top">
	
			<div id="date"><? print(Date("l F d, Y")); ?> </div>
		
			<div id="userpanel">
				fgdhdfgh
			</div>
			
			<div id="top-nav">
				fgsdfgsdd
			</div>
				
		</div>
	
		<div id="logo">
			<img src="/test/img/emlogo.png">
		</div>

	
		<div id="banner-top">
			<img src="/test/img/banner.jpg">
		</div>
	
	
		<div id="social">
			face, twit, yutub
		</div>
	
	
	
		<div id="searchbar">
			
		</div>
	
	
	
		<div id="navbar">
			dfgdfgd
		</div>
	
		<div id="submenu">
			fsdfds
		</div>
			
		
		<div id="pogoda">
		POGODA NA 10 DNI!
		</div>
		
		
		
		<div id="banner-top-left">
			<img src="/test/img/728.png">
		</div>
		
		
		<div id="articles-left-top">
			<div id="articlepanelheadbg">sdfsdf</div>
			<div id="articlepanelinput">sdfsdfsdf</div>
		</div>

		
		<div id="right-top">
			<div id="infopanelhead">sdfsdf</div>
			<div id="infolepanelinput">sdfsdfsdf</div>
		</div>
	
		<div id="left-top">
			<div id="lefttoppanelhead">dsfgdgs</div>
			<div id="leftpaneltopinput">wertewrw</div>
		</div>
	
	
		<div id="content">
			<div id="contenthead">sdsfsd</div>
			<div id="contentinput">cxxz</div>
		</div>
	
	<div id="bottom">
	
		<div id="user1">
		
			<div id="user1head">this panel should be below the  div content</div>
			
				<div id="user1input">the same lol</div>
				
			</div>
			
		</div>
		
		<div id="user2">
			
		</div>
	
	</div>
		
		<div id="user3">
		
		</div>
		
		<div id="user4">
			
		</div>
		
		<div id="user5">
			
		</div>
		
		<div id="user6">
			
		</div>
		
		<div id="user7">
		
		</div>
		
		<div id="user8">
			
		</div>
	
		<div id="user9">
			
		</div>
	
		<div id="user10">
			
		</div>
	
		<div id="partnerhead">
			
		</div>

		<div id="bottomenu">
		
		</div>
	
		<div id="copyright">
			
			<div id="scrolltop"></div>
		</div>

		<div id="autor">
		
		</div>

</body>
</html>

CSS:

Code:

@charset "UTF-8";
/* page */

body {
background-color: #dcdcdc;
font-family: tahoma;
font-size: 12px;
color: #000000;
height: 100%;

}

#top {
width: 102%;
height: 30px;
margin-top: -10px;
margin-left: -10px;
padding-top: 10px;
position: relative;
background-image: url(/test/img/topbg.png) ;
overflow:hidden;
background-attachment: fixed;
clear:both;
float:left;
font-family: tahoma;
font-size: 12px;
color: #ffffff;
}

#date {
width: 300px;
height: 30px;
padding-left: 12%;
margin-top: 0;
position:absolute;
font-family: tahoma:
font-size: 12px;
color: #ffffff;
}

#userpanel {
width: 100px;
height: 30px;
padding-right: 30%;
padding-left: 70%;
margin-top: 0;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #ffffff;
}

#top-nav{
width: 200px;
height: 30px;
padding-right: 15%;
padding-left: 80%;
margin-top: 0;
position:absolute;
font-family: tahoma:
font-size: 12px;
color: #ffffff;
}

#logo{
width: 300px;
height: 130px;
padding-left: 15%;
margin-top: 5%;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #ffffff;
}

#banner-top{
width: 468px;
height: 60px;
padding-left: 50%;
margin-top: 5%;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #ffffff;
}

#social{
width: 200px;
height: 60px;
padding-left: 60%;
margin-top: 14%;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #000000;
}

#searchbar{
width: 257px;
height: 44px;
margin-left: 69.4%;
margin-top: 13%;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #ffffff;
background-image: url(/test/img/searchbg.png) ;
}

#navbar{
width: 996px;
height: 40px;
padding-left: 20px;
padding-top: 15px;
margin-bottom: 0px;
padding:bottom: 0px;
margin-top: 16%;
margin-left: 10%;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #ffffff;
background-image: url(/test/img/navbarbg.png) ;
}

#submenu{
width: 996px;
height: 30px;
padding-left: 20px;
padding-top: 18px;
margin-bottom: 0px;
padding:bottom: 0px;
margin-top: 20%;
margin-left: 10%;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #ffffff;
background-image: url(/test/img/subnavbarbg.png) ;
}

#banner-top-left {
width: 728px;
height: 120px;
padding-left: 20px;
padding-top: 18px;
margin-bottom: 0px;
padding:bottom: 0px;
margin-top: 26%;
margin-left: 8.5%;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #ffffff;
}

#pogoda{
width: 200px;
height: 60px;
margin-left: 70%;
padding-left: 5%;
margin-top: 30%;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #000000;
}

#articles-left-top {
width: 670px;
height: 270px;
padding-left: 20px;
padding-top: 18px;
margin-bottom: 0px;
padding-bottom: 10px;
margin-top: 26%;
margin-left: 8.5%;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #ffffff;
}

#articlepanelheadbg {
width: 670px;
height: 41px;
padding-left: 20px;
padding-top: 18px;
margin-bottom: 0px;
padding-bottom: 10px;
margin-top: 20%;
margin-left: 0%;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #ffffff;
background-image: url(/test/img/articlepanelheadbg.png) ;
}

#articlepanelinput {
width: 675px;
height: auto;
padding-left: 15px;
padding-top: 18px;
margin-bottom: 0px;
padding-bottom: 10px;
margin-top: 27%;
margin-left: 0%;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #000000;
background-image: url(/test/img/articlepanelinput.png) ;
}

#right-top {
width: 291px;
height: 270px;
padding-left: 20px;
padding-top: 18px;
margin-bottom: 0px;
padding-bottom: 10px;
margin-top: 26%;
margin-left: 8.5%;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #ffffff;
}

#infopanelhead {
width: 291px;
height: 41px;
padding-left: 20px;
padding-top: 18px;
margin-bottom: 0px;
padding-bottom: 10px;
margin-top: 44%;
margin-left: 225%;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #ffffff;
background-image: url(/test/img/infopanelhead.png) ;
}

#infolepanelinput {
width: 291px;
height:auto;
padding-left: 20px;
padding-top: 18px;
margin-bottom: 0px;
padding-bottom: 10px;
margin-top: 60%;
margin-left: 225%;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #000000;
background-image: url(/test/img/infopanelinput.png) ;
}

#left-top {
width: 291px;
height:auto;
padding-left: 20px;
padding-top: 18px;
margin-bottom: 0px;
padding-bottom: 10px;
margin-top: 60%;
margin-left: 8%;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #000000;

}

#lefttoppanelhead {
width: 291px;
height:21px;
padding-left: 20px;
padding-top: 18px;
margin-bottom: 0px;
padding-bottom: 10px;
margin-top: 0%;
margin-left: 0%;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #ffffff;
background-image: url(/test/img/lefttoppanelhead.png) ;
}
#leftpaneltopinput {
width: 291px;
height:auto;
padding-left: 20px;
padding-top: 18px;
margin-bottom: 0px;
padding-bottom: 10px;
margin-top: 15%;
margin-left: 0%;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #000000;
background-image: url(/test/img/leftpaneltopinput.png) ;
}

#content {
width: 661px;
height:auto;
padding-left: 20px;
padding-top: 18px;
margin-bottom: 0px;
padding-bottom: 10px;
margin-top: 27.6%;
margin-left: 34%;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #000000;
}

#contenthead {
width: 667px;
height: 21px;
padding-left: 20px;
padding-top: 18px;
margin-bottom: 0px;
padding-bottom: 10px;
margin-top: 60%;
margin-left: 0%;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #ffffff;
background-image: url(/test/img/contenthead.png) ;
}
#contentinput {
width: 691px;
height:auto;
padding-left: 20px;
padding-top: 18px;
margin-bottom: 0px;
padding-bottom: 10px;
margin-top: 67%;
margin-left: 0%;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #000000;


#bottom {
width: 996px;
height: auto;
margin-top: 500px;
padding-top: 100%;
margin-left: 20%;
position:absolute;
overflow:hidden;
}

#user1 {
width: 667px;
height: auto;
padding-left: 20px;
padding-top: 18px;
margin-bottom: 0px;
padding-bottom: 10px;
margin-top: 72%;
margin-left: 0%;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #ffffff;
}

#user1head{
width: 667px;
height: 21px;
padding-left: 20px;
padding-top: 18px;
margin-bottom: 0px;
padding-bottom: 10px;
margin-top: 72%;
margin-left: 0%;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #ffffff;
background-image: url(/test/img/user1head.png) ;
}
#user1input  {
width: 691px;
height:auto;
padding-left: 20px;
padding-top: 18px;
margin-bottom: 0px;
padding-bottom: 10px;
margin-top: 82%;
margin-left: 0%;
position:absolute;
font-family: tahoma;
font-size: 12px;
color: #000000;
background-image: url(/test/img/user1input.png) ;

#user2 { }

#user2head {}

#user2input {}

#user3 { }

#user3head {}

#user3input {}

#user4 { }

#user4head {}

#user4input {}

#user5 { }

#user5head {}

#user5input {}

#user6 { }

#user6head {}

#user6input {}

#user7 { }

#user7head {}

#user7input {}

#user8 { }

#user8head {}

#user8input {}

#user9 { }

#user9head {}

#user9input {}

#user10 { }

#user10head {}

#user10input {}

/*page*/


/* Text styles */
.blog-featured h2 {
	font-size: 1.5em;
	margin-bottom:0em;
}
p.readmore {
	text-indent:0;
	font-size: .9em;
}
.joomla-footer {
	font-size: .9em;
	margin-bottom: 30px;
}

/* Article functions */
ul.actions {
	clear:both;
	margin-top: -50px;
	float:right;
}
ul.actions li {
	list-style-type: none;
	float:right;
	margin-left: 10px;
}

/* Login styles */
p#form-login-username label,
p#form-login-password label {
	width: 160px;
	display:block;
}
p#form-login-remember label {
	font-size: .9em;
	font-weight: normal;
	line-height: 25px;
}
p#form-login-remember input {
	float:left;
	margin-right: 5px;
}
form#form-login ul {
	margin: 0;
	padding: 0;
}
form#form-login ul li {
	list-style-type: none;
	margin-left: 20px;
	font-size: .9em;
}

/* Image float styles */
.img-fulltext-left {
	float:left;
	margin-right: 20px;
	margin-bottom: 20px;
}

.img-intro-left {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

.img-fulltext-right {
	float: right;
	margin-left: 20px;
	margin-bottom: 20px;
}

.img-intro-right {
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
}

As the reward i will donate 100 points to someone who will help me.

dxverm · Feb 19, 2014

As far as the images go, in the css file you will need to change url(/test/img/img.jp) to url(../img/img.jpg) in all spots where an image is called in the css file. Otherwise what is it exactly that isn't working, what are you wanting fixed specifically?

jaran · Feb 20, 2014

Try to edit this css value

Code:

#top {
width: 102%;
height: 30px;
margin-top: -120px;
margin-left: -10px;
padding-top: 10px;
position: relative;
background-image: url(/test/img/topbg.png) ;
overflow:hidden;
background-attachment: fixed;
clear:both;
float:left;
font-family: tahoma;
font-size: 12px;
color: #ffffff;
}

You should change value of width, margin-top and margin-left something like this,

Code:

#top {
width: 100%;
height: 30px;
margin-top: 0px;
margin-left: 10px;
padding-top: 10px;
position: relative;
background-image: url(/test/img/topbg.png) ;
overflow:hidden;
background-attachment: fixed;
clear:both;
float:left;
font-family: tahoma;
font-size: 12px;
color: #ffffff;
}

or you can try it yourself

GigaGreg · Feb 23, 2014

I had problem with broken positions, i fixed them on my own after 3 hours of searching my problem.

Thanks jaran for helping me as well

zeetaher · Mar 9, 2014

Since you are new to Joomla, can you offer me any links to where I can learn a little bit about the basics of Joomla? I've done years with php and html. Recently have looked at Joomla and wanted to get some direct referrals from someone who is a NOOB to Joomla for where they got their start.

Html & css help

GigaGreg

Moderator

dxverm

New member

jaran

New member

GigaGreg

Moderator

zeetaher

New member

Visitors Online