4 Replies - 7855 Views - Last Post: 29 March 2011 - 12:38 AM

#1 Addio569   User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 316
  • Joined: 26-November 08

what part of my css do I have to amend to move this line of text up

Posted 24 March 2011 - 04:05 AM

Hi I'm trying to move a line of text to a certain position on my webpage, I'm using css to control the layout.

The line of text is underneath my menu, so I'm guessing there is some padding or actual space that the menu is taking up that I need amend, but I can't seem to find it.

the css is:

html, body, div, h1, h2, h3, h4, h5, h6, para {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
}

img {
	border-style: none;
}

body {
  background-color: #F7E7CE;
  color: #000000;
  font-family: garamond, times new roman;
  font-size: 11px;
  line-height: 14px;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  text-align: center;
}
p{
	color: #000000;
	font-size: 16px;
	font-weight: normal;

}

}
para{
	color: #000000;
	font-size: 18px;
	font-weight: bold;
	line-height: 20px;
	padding-bottom: 5px;
	

}
h1 {
	color: #000000;
	font-size: 32px;
	font-weight: normal;
	line-height: 28px;
	letter-spacing: -1px;
}
h2 {
	color: #000000;
	font-size: 18px;
	font-weight: bold;
	line-height: 20px;
	padding-bottom: 5px;
	text-decoration:underline;
}

h3 {
	color: #000000;
	font-size: 20px;
	font-weight: normal;
	line-height: 20px;
	padding-bottom: 5px;
}
a,  a:link {
	color: #000000;
	font-weight: bold;
	text-decoration: underline;
}
a:visited {
	color: #000000;
	font-weight: normal;
	text-decoration: underline;
}
a:hover {
	color: #000000;
	text-decoration: none;
}
a:focus {
	color: #13399D;
}
a:active {
	color: #13399D;
}
#main {
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	text-align: left;
	width: 1000px;
	background: #fff url(images/content-bg.png) left 13px; 
	background-position:center;
}
#main #header {
	font-size: 18px;
	font-weight: bold;
	line-height: 15px;
	padding: 10px 10px;
	height: 158px;
	background: url(images/banner.png) no-repeat;
}
#main #menuMain {
	height: 30px;
	padding: 0 66px;
	margin-right: 20px;
	margin-left: 30px;
}

#main #contentWrapper #content {
	margin: 0 100px;
	padding: 0px;
}
#main #contentWrapper .clearFloat {
  clear: both;
  display: block;
}
#main #footer {
	padding: 10px 30px 0px;
	background: url(images/footer.png) no-repeat left top;
	height: 75px;
	color: #FFFFFF;
	text-align: center;
}
#leftBoxContent {
	padding: 20px 0px 10px;
	width: 170px;
}
#main #contentWrapper {
	padding-right: 25px;
	padding-left: 25px;

}
#leftBox ul, #rightBox ul {
	margin: 0px;
	padding: 10px 0px 20px;
}
#leftBox ul li, #rightBox ul li {
	list-style: none;
	display: inline;
}#leftBox ul li a, #rightBox ul li a {
	display: block;
	padding: 4px 4px 4px 10px;
	background: url(images/li-dot.gif) no-repeat left top;
	border-bottom: 1px solid #F7E7CE;
}
#leftBox  ul li a:hover,#rightBox ul li a:hover {
	background: #F7E7CE url(images/li-dot.gif) no-repeat left top;
	text-decoration: none;
}
.fltlft {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}
.fltrt {
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
}
#content ul li {
	margin-bottom: 5px;
}
#content blockquote {
	border-left: 5px solid #BAC2D1;
	margin-left: 15px;
	background: #F7E7CE;
	padding: 5px 10px;
	margin-right: 15px;
}

#content blockquote blockquote {
	background: #F7E7CE;
}

.lightBox {
	color: #FFFFFF;
	background: #63A7F8;
	border: 1px solid #C0C1C3;
	padding: 6px;
}
.darkBox {
	color: #FFFFFF;
	background: #4C84C7;
	border: 1px solid #1B1B1C;
	padding: 6px;
}
.darkBox a, .darkBox a:hover, .darkBox a:visited, .darkBox a:active {
	color: #FFFFFF;
}
.lightBox a, .lightBox a:hover, .lightBox a:visited, .lightBox a:active {
	color: #FFFFFF;
}
#sddm
{	margin: 0;
	padding: 0;
	z-index: 30}

#sddm li
{	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 14px garamond, times new roman}

#sddm li a
{	display: block;
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width: 130px;
	background: #F7E7CE;
	color: #000000;
	text-align: center;
	text-decoration: none}

#sddm li a:hover
{	background: #FF6699}

#sddm div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #EAEBD8;
	border: 1px solid #5970B2}

#m1
{
	z-index:100;
}
	
#m2
{
	z-index:100;
}

#m3
{
        z-index:100;
}

	#sddm div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 5px 10px;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #F7E7CE;
		color: #000000;
		font: 12px garamond, times new roman}

	#sddm div a:hover
	{	background: #FF6699;
	z-index:100;
		color: #FFF}


#footer a, #footer a:hover, #footer a:visited, #footer a:active {
	color: #FFFFFF;
}

#slideshow {
    position:relative;
    height:350px;
	z-index:10;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}

table.hotel {
	font-family: garamond, times new roman;
        font-size:14px; 
	border-width: 1px;
	border-spacing: 1px;
	border-style: inset;
	border-color: gray;
	border-collapse: collapse;
	background-color: white;
}
table.hotel th {
	border-width: 2px;
	padding: 4px;
	border-style: inset;
	border-color: gray;
	background-color: white;
	-moz-border-radius: 0px 0px 0px 0px;
}
table.hotel td {
	border-width: 2px;
	padding: 4px;
	border-style: inset;
	border-color: gray;
	background-color: white;
	-moz-border-radius: 0px 0px 0px 0px;
}


and my page is:

<!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>
<title>A Wedding in Italy</title>
<link rel="stylesheet" href="styles.css">
<link rel=”shortcut icon” href=”http://www.adam-and-natalies-wedding.co.uk/favicon.ico” mce_href=”http://www.adam-and-natalies-wedding.co.uk/favicon.ico”/>
<script type="text/javascript">
var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;

// open hidden layer
function mopen(id)
{	
	// cancel close timer
	mcancelclosetime();

	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// close layer when click-out
document.onclick = mclose; 
</script>

<script type="text/javascript">
var image1=new Image()
image1.src="images/gardaa.jpg"
var image2=new Image()
image2.src="images/gardab.jpg"
var image3=new Image()
image3.src="images/gardac.jpg"
//-->
</script>
</head>

<body>
<div id="main">
  <div id="header"></div>
  <div id="menuMain">
<ul id="sddm">
    <li><a href="home.php">Home</a></li>
    <li><a href="home.php" 
        onmouseover="mopen('m1')" 
        onmouseout="mclosetime()">Lake Garda</a>
        <div id="m1" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="map.php">Map of Lake Garda</a>
        <a href="history.php">History of the lake and castle</a>
        <a href="thingstodo.php">Things to do on the Lake</a>
        <a href="other.php">Other Information</a>
        </div>
    </li>
    <li><a href="#" 
        onmouseover="mopen('m2')" 
        onmouseout="mclosetime()">Your Stay</a>
        <div id="m2" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="placestostay.php">Places to stay</a>
        <a href="touroperators.php">Tour Operators</a>
        <a href="lengthofstay.php">Length of Stay</a>
        <a href="">Type of accomodation</a>
	<a href="flights.php">Flights & Transfers</a>
        </div>
    </li>
    <li><a href="weddingday.php">Wedding Day</a></li>
    <li><a href="#" 
        onmouseover="mopen('m3')" 
        onmouseout="mclosetime()">Other</a>
        <div id="m3" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="map.php">Map of Italy</a>
        <a href="mailform.php">Send us a Message</a>
        </div>
    </li>
    </ul>
<div style="clear:both"></div>
  </div>
  <div id="contentWrapper">
    <div id="leftBox">
      <div id="leftBoxContent">
  <div id="lightBox">
          </div>
    </div>
    </div>
    <div id="rightBox">
	</div>
    <div id="content">
<center><p> <a href="byebye.php">Logout</a></p>

<center/>

<center><img src="images/headings/heading1.png" alt="slideshow" width="750" height="70"/></center><br>

<?php
				
		if(isset($_COOKIE['AboutVisit']))
	        { 
		$last = $_COOKIE['AboutVisit'];
		$user = $_COOKIE['user']; 
		echo "Hello ". $user;
		echo ", Your last Visit was on ". $last; 
		} 
		else 
		{ 
		echo "Welcome to our site!"; 
		} 


    ?>


<center><img style="border:6px double #545565;"  src="gardaa.jpg" name="slide" width=600 height=400><center>

<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",1500)
}
slideit()
//-->
</script><br>

<img src="images/headings/homehead.png" alt="homehead" width="700" height="70"/>

<img src="images/headings/homehead2.png" alt="homehead2" width="700" height="70"/><br>

<p>Updates:</p><br><br>

<h1><script language="Javascript">
TargetDate = "07/31/2012 11:00 AM GMT+0:00";
BackColor = "palepink";
ForeColor = "black";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "It is finally here!";
</script>
<script language="Javascript" src="javascript/countdown.js"></script></h1>

    </div>
    <br class="clearFloat" />
  </div>
  <div id="footer"></div>
</div>
</body>
</html>


now the line I want to move up (so there is just a little space between the menu is:

<center><p> <a href="byebye.php">Logout</a></p>


which part of the css do I amend to make this happen??

thanks

Is This A Good Question/Topic? 0
  • +

Replies To: what part of my css do I have to amend to move this line of text up

#2 shammancer   User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 110
  • Joined: 03-September 10

Re: what part of my css do I have to amend to move this line of text up

Posted 25 March 2011 - 06:06 PM

Coul you either post a picture of the website or post a link to it? Please.
Was This Post Helpful? 0
  • +
  • -

#3 Addio569   User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 316
  • Joined: 26-November 08

Re: what part of my css do I have to amend to move this line of text up

Posted 28 March 2011 - 04:45 AM

sure! sorry that would have made sense...

Posted Image

Uploaded with ImageShack.us
Was This Post Helpful? 0
  • +
  • -

#4 GhandiJones   User is offline

  • D.I.C Head
  • member icon

Reputation: 54
  • View blog
  • Posts: 174
  • Joined: 17-March 11

Re: what part of my css do I have to amend to move this line of text up

Posted 28 March 2011 - 05:56 PM

I'd suggest get rid of your <center> tag and slap a div around it and style it that way, or add a class to your <p> tag. Then just add..

whatever {
position: relative;
width:100%;
height:10px;
text-align:center;
}


..and see where that falls, and adjust accordingly from there.

This post has been edited by GhandiJones: 28 March 2011 - 06:06 PM

Was This Post Helpful? 0
  • +
  • -

#5 Addio569   User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 316
  • Joined: 26-November 08

Re: what part of my css do I have to amend to move this line of text up

Posted 29 March 2011 - 12:38 AM

View PostGhandiJones, on 28 March 2011 - 05:56 PM, said:

I'd suggest get rid of your <center> tag and slap a div around it and style it that way, or add a class to your <p> tag. Then just add..

whatever {
position: relative;
width:100%;
height:10px;
text-align:center;
}


..and see where that falls, and adjust accordingly from there.


it isn't that piece of text though, its something to do with the menu, or my content div..
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1