4 Replies - 992 Views - Last Post: 03 April 2013 - 07:21 AM

#1 Vompaudi  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 43
  • Joined: 23-November 12

How to get dropdown menu to right position?

Posted 02 April 2013 - 08:14 AM

So...problems again. Now I made dropdown menu with CSS. But it goes all time to left side, and I want it to middle.

http://img822.images...linkkpalkki.png

If I modify margin, it moves, but at same time moves also those dropdown elements.

http://img62.imagesh...inkkpalkki2.png

Is This A Good Question/Topic? 0
  • +

Replies To: How to get dropdown menu to right position?

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3516
  • View blog
  • Posts: 12,005
  • Joined: 12-December 12

Re: How to get dropdown menu to right position?

Posted 02 April 2013 - 08:28 AM

Can you provide a link to the live site? Otherwise you will need to post the relevant CSS and HTML.
Was This Post Helpful? 0
  • +
  • -

#3 Vompaudi  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 43
  • Joined: 23-November 12

Re: How to get dropdown menu to right position?

Posted 02 April 2013 - 11:10 AM

Here is menu's own CSS-code:

ul {
    font-family: Arial, Verdana;
    font-size: 18px;
    margin: 0px 0px 0px;
    padding: 0px 0px 0px;
    list-style: none;
	margin-left: 0px;
}
ul li {
	position: relative;
    display: block;
    float: left;
}
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 20px 5px 20px;
    background: #1e7c9a;
    margin-left: 1px;
    white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
    display: block;
    position: absolute;
}
li:hover li {
    float: none;
    font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
    background: #1e7c9a;
}


Here is CSS-code of rest site:

                /************* GENERAL CSS ************/

body {
	margin: 0px;
	padding: 0px; 
	text-align: justify;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333333; background-image:url(images/pysty.jpg); background-repeat:repeat-x;background: #111111;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #3399FF;
}

a {
	font-weight: bold;	
	text-decoration: none;
	color: #33CCFF;
}

a:hover {
	text-decoration: underline;
	color: #33CCFF;
}

/************* HEADER STUFF ************/
#koko {
background: #54a3cc; background-image:url(images/tausta.jpg); background-repeat:repeat-y; background-position:center; 
}
#header {
	width: 888px;
	height: 200px;
	margin: 0px auto;
	padding: 00px 0px;
	background: #FFFBFD url(images/header.jpg);
}

#header h1 {
	margin: 0px;
	padding: 0px 0px 0px 10px;
	text-align: left;
	color: #3399FF;
	font-size: 3em;
	text-transform: uppercase;
}

#header h2 {
	margin: 0px;
	padding: 0px 0px 0px 20px;
	text-align: left;
	font-size: 1.5em;
	text-transform: uppercase;
}
#loko {
	text-align: center;
}



/************* SISALTO ************/

#content { 
   	width: 888px;
	margin: 0px auto;
	padding: 20px 0px 0px 0px;
}

#content h2, #content h3, #content h4, #content h5, #content h6 {
	font-weight: normal;
}

#content p, #content ul, #content ol {
	line-height: 150%;
}

#left {
	float: left; 
	width: 600px;
	padding: 0px 20px 40px 20px;
}

#right {
	float: right;
	width: 200px;
	padding: 0px 20px 40px 20px;
	color: #000000; text-align:left;
}

/************* FOOTER ************/

#footer {
	clear: both;
	width: 888px; height:30px;
	margin: 0px auto;
	border-top: 1px solid #666666; background-color:#0F6; background-image:url(images/Footer.png);
	font-size: 9px;
	text-align: center;
	color: #fff; padding-bottom:30px;
}


And HTML-code.

<?php
mb_internal_encoding("ISO-8859-1");
?>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset="ISO-8859-1">
<title>Dataprank OY</title>
<meta name="keywords" content="" />
<meta name="description" content="" />



<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body><div id="koko">
<div id="header">
<div id="loko">	<img src="images/logo.png" alt="" width="890" height="200"  /></div>



</div>
<div id="menu">
<?php include('linkit.inc'); ?>
</div>
<div id="content">
  <div id="left">
<?php include('etusivu.txt'); ?><br />
<?php include('kuvaboksietusivu.html'); ?><br /><br />

  </div>
	<div id="right">
	<?php include('sivupalkki.txt'); ?>
    <br /><br /><br />
	</div>
</div>
<div id="footer">
<?php include('footer.inc'); ?>
</div></div>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3516
  • View blog
  • Posts: 12,005
  • Joined: 12-December 12

Re: How to get dropdown menu to right position?

Posted 02 April 2013 - 11:44 AM

You need to post the resultant HTML, not with embedded PHP. View the source for the page in your browser.
Was This Post Helpful? 0
  • +
  • -

#5 Vompaudi  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 43
  • Joined: 23-November 12

Re: How to get dropdown menu to right position?

Posted 03 April 2013 - 07:21 AM

Here is source from browser.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset="ISO-8859-1">
<title>Dataprank OY</title>
<meta name="keywords" content="" />
<meta name="description" content="" />



<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body><div id="koko">
<div id="header">
<div id="loko">	<img src="images/logo.png" alt="" width="890" height="200"  /></div>



</div>
<div id="menu">
      <link href="stylemenu.css" rel="stylesheet" type="text/css" /> 

<ul id="menu">
    <li><a href="#">Etusivu</a></li>
    <li><a href="#">Yritys</a>
        <ul>
            <li><a href="#">Historia</a></li>
            <li><a href="#">Referenssit</a></li>
            <li><a href="#">Visio</a></li>
        </ul>
    </li>
    <li><a href="#">Palvelut</a>
        <ul>
            <li><a href="#">Konepaketit</a></li>
            <li><a href="#">Huollot</a></li>
            <li><a href="#">Ohjelmistot</a></li>
            <li><a href="#">Tietoturva</a></li>
            <li><a href="#">Koulutus</a></li>
        </ul>
    </li>
    <li><a href="#">Ota yhteyttä</a></li>
</ul>            </div>
<div id="content">
  <div id="left">
    <h1>Tervetuloa!</h1>

Dataprank OY on Etelä- ja Keski-suomessa toimiva IT-yritys. Palveluitamme on mm. tuki- ja opastus, tietokoneiden huolto ja myynti. Myymme myös erilaisia ohjelmistoja halpaan hintaan! Tule tutustumaan, ja ota koneesikin mukaan. Teemme sille täysihuollon kokonaan veloituksetta! <br><br>

Huoltotaksa 10 €/tunti    

<br>    <br />
kuvaboksi<br /><br />

  </div>
	<div id="right">
	      <h2>Sivupalkki</h2> 
plaaplaaplaaplaaplaaplaa    <br /><br /><br />
	</div>
</div>
<div id="footer">
<p><a href="./admin/hallinta.php">.</>/a></p>      </div></div>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1