html - Position erstatning? - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #15047 @ 02.09.09 15:05

Hejsa.

Jeg har sådan en knap på min side. Jeg har brugt..

CSS kode

 position: absolut; top 555px; left 580px;

Men det ser ud helt fint ud på min skærm. Men lige så snart en af mine venner åbner det på deres computer, så sidder den knap et HELT andet sted. Også når jeg selv minimere min browser, eller gør den mindre, så sidder knappen helt forkert.

Hvordan kan jeg ordne dette her? Hvis I vil og jeg må, kan jeg smide et link til siden, så kan I selv se hvad jeg mener. Men jeg har absolut ingen idé om hvordan jeg skal ordne det her. Har prøvet at Google dét, men fandt intet som jeg kunne bruge. Eventuelt fordi jeg ikke helt præcist ved hvad jeg skal søge efter.

Mange hilsner,
- Magnus.

Bruger #11506 @ 02.09.09 16:03

190

Du kan kun lave absolute indenfor et bestemt område hvis du først laver en fx DIV med position:relative.

Hvis du bare indsætter den sådan der, så laver den abs.pos efter skærmens bredde.

så hvis du indboxer din knap i en div der fx hedder : position:relative og så width 30px, height 30px, kan du lave abs. pos: top 2, eller left 2px, eller hvad der passer til det.

Bruger #15047 @ 02.09.09 16:17

Du kan kun lave absolute indenfor et bestemt område hvis du først laver en fx DIV med position:relative.

Hvis du bare indsætter den sådan der, så laver den abs.pos efter skærmens bredde.

så hvis du indboxer din knap i en div der fx hedder : position:relative og så width 30px, height 30px, kan du lave abs. pos: top 2, eller left 2px, eller hvad der passer til det.

Aha. Den knap skal allerede været i en div/h1.

Så kan jeg på nogen måde definere den?

Dette er min .css fil. Det er a.button5 jeg snakker om, faktisk også med alle de andre. Men jeg bruge specielt lige den.

CSS kode

 body {
     margin:0px 0px; padding:0px;
     text-align:center;
 }
 
 .licensbox
 {
 top:25px;
 left:500px;
 width:900px;
 height:150px;
 overflow:scroll;
 }
 
 h1 {
     border-top-width: 1px;
     border-top-style: solid;
     border-top-color: black;
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: black;
     border-right-width: 1px;
     border-right-style: solid;
     border-right-color: black;
     border-left-width: 1px;
     border-left-style: solid;
     border-left-color: black;
     margin: 10px 280px 25px 278px;
     max-height: 425px;
     min-height: 425px;
     font-size: 1.2em;
     font-family: Georgia, "Comic Sanse MS", serif;
 }
 .underlinemenu {
     font-weight: bold;
     width: 100%;
     height: 50px;
 }
 #underlineMenuContent {
     height:800px;
     margin-right: auto;
     margin-left: auto;
     width: 800px;
 }
 
 .underlinemenu{
 font-weight: bold;
 width: 100%;
 }
 
 .underlinemenu ul{
 padding: 6px 0 7px 0;
 margin: 0;
 text-align: center;
 }
 
 .underlinemenu ul li{
 display: inline;
 }
 
 .underlinemenu ul li a{
 color: #494949;
 padding: 6px 3px 4px 3px; 
 margin-right: 20px;
 text-decoration: none;
 border-bottom: 3px solid grey;
 }
 
 /*.underlinemenu ul li a:hover, .underlinemenu ul li a.selected {
     border-bottom-color: black;
 }
 */
 .start {
     background-color: blue;
 }
 
 a.button{
     background:url(img/button.gif);
     display:block;
     color:#555555;
     font-weight:bold;
     height:30px;
     line-height:29px;
     margin-bottom:14px;
     text-decoration:none;
     width:191px;
 }
 
 a.button{
 background:url(images/button.gif);
 display:block;
 color:#555555;
 font-weight:bold;
 height:30px;
 line-height:29px;
 margin-bottom:14px;
 text-decoration:none;
 width:191px;
 position:relative; left: 800px; top: 275px;
 }
 
 a.button3{
 background:url(images/button.gif);
 display:block;
 color:#555555;
 font-weight:bold;
 height:30px;
 line-height:29px;
 margin-bottom:14px;
 text-decoration:none;
 width:191px;
 position:absolute; left: 1100px; bottom: 115px;
 }
 
 a.button4{
 background:url(images/button.gif);
 display:block;
 color:#555555;
 font-weight:bold;
 height:30px;
 line-height:29px;
 margin-bottom:14px;
 text-decoration:none;
 width:191px;
 position:absolute; left: 1100px; bottom: 120px;
 }
 
 a.button5{
 background:url(images/button.gif);
 display:block;
 color:#555555;
 font-weight:bold;
 height:30px;
 line-height:29px;
 margin-bottom:14px;
 text-decoration:none;
 width:191px;
 position:absolute; left: 720px; bottom: 120px;
 }
 
 a.button1{
 background:url(images/button.gif);
 display:block;
 color:#555555;
 font-weight:bold;
 height:30px;
 line-height:29px;
 margin-bottom:14px;
 text-decoration:none;
 width:191px;
 position:relative; left: 800px; top: 330px;
 }
 
 .checkbox {
     position:relative; left: 700px; top: 330px;
 }
 
 #button1{
 display:none;
 }
 
 #block {
 background: blue;
 }
  
 .next{
     background:url(images/arrow_right.png) no-repeat 10px 8px;
     text-indent: 45px;
     display:block;
 }
 
 .box1 {
 top: 70px;
 left: 50px;
 width:250px;
 height:250px;
 overflow:auto;
 background-color: white;
 }    
 
 div.scroll {
 top: 25px;
 left: 50px;
 height: 335px;
 width: 800px;
 overflow: auto;
 border: 1px solid #666;
 background-color: #ccc;
 padding: 8px;
 }

Jeg har sådan en box.

Du kan se den her..

Kode

http://test205.realchamp.dk/install_beta

Bare side ét har den knap, den kommer ikke op det rigtige sted. Og vil helst have det sådan, at jeg bare kan ud skrive det på én linje.(tænker på noget class). Men jeg kan da lige prøve det der med div's. Jeg vil gerne have knappen nede i højre højrne.

Ps. hvad er "abs.pos"?

EDIT:

Jeg har prøvet med følgende css:

CSS kode

 .button {
 position:relative;
 width: 30px;
 height: 0px;
 left: 1100px;
 bottom: 140px;
 }

Og så det her HTML.

HTML kode

 <div class="button"><a href="stage1_2.php" class="button3"><span class="next">Continue</span></a></div>";

Indlæg senest redigeret d. 02.09.2009 16:33 af Bruger #15047

Bruger #15047 @ 02.09.09 21:26

bump

Bruger #11506 @ 02.09.09 22:01

190

Her jeg har lavet lidt om i din kode, men det skulle give dig en ide om hvad der skal til.

Kode

<!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">
<link href="install.css" rel="stylesheet" type="text/css" />
<html>
<body>
<img src="images/header.jpg">
<link rel="stylesheet" href="background.css" type="text/css" />
<link rel="stylesheet" href="install.css" type="text/css" />
<div class="underlinemenu">
<ul>
<li><a>Start</a></li>
<li><a>License of Use</a></li>
<li><a>Files and Directories</a></li>
<li><a>MySQL</a></li>
<li><a>Create Tables</a></li>
<li><a>Admin Account</a></li>
<li><a>Finish</a></li>
</ul>
</div>
<div id="contentWrapper">
<p>
Welcome to Smart Panel CFX Installation guide<br>This guide will setup a master account for you, plus creating the tables required.<br>You will need a MySQL database to complete these critical steps.<br>Simply follow the instructions.<br>
</p>
<div id="absposBtn"><a href="stage1.php" >Continue</a></div>
</div>
<font size="1">Build 1 - Version 0.0Beta RC1</font>
<br>
<img src="images/footer.jpg">
</body>
</html>

og CSS:

Kode

body {
	margin:0px 0px; padding:0px;
	text-align:center;
}

.licensbox
{
top:25px;
left:500px;
width:900px;
height:150px;
overflow:scroll;
}

h1 {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: black;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: black;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: black;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: black;
	margin: 10px 280px 25px 278px;
	max-height: 425px;
	min-height: 425px;
	font-size: 1.2em;
	font-family: Georgia, "Comic Sanse MS", serif;
	position:relative;
}
.underlinemenu {
	font-weight: bold;
	width: 100%;
	height: 50px;
}
#underlineMenuContent {
	height:800px;
	margin-right: auto;
	margin-left: auto;
	width: 800px;
}

.underlinemenu{
font-weight: bold;
width: 100%;
}

.underlinemenu ul{
padding: 6px 0 7px 0;
margin: 0;
text-align: center;
}

.underlinemenu ul li{
display: inline;
}

.underlinemenu ul li a{
color: #494949;
padding: 6px 3px 4px 3px; 
margin-right: 20px;
text-decoration: none;
border-bottom: 3px solid grey;
}

/*.underlinemenu ul li a:hover, .underlinemenu ul li a.selected {
	border-bottom-color: black;
}
*/
.start {
	background-color: blue;
}

a.button{
	background:url(img/button.gif);
	display:block;
	color:#555555;
	font-weight:bold;
	height:30px;
	line-height:29px;
	margin-bottom:14px;
	text-decoration:none;
	width:191px;
}

a.button{
background:url(images/button.gif);
display:block;
color:#555555;
font-weight:bold;
height:30px;
line-height:29px;
margin-bottom:14px;
text-decoration:none;
width:191px;
position:relative; left: 800px; top: 275px;
}


a.button3{
background:url(images/button.gif);
display:block;
color:#555555;
font-weight:bold;
height:30px;
line-height:29px;
margin-bottom:14px;
text-decoration:none;
width:191px;
margin-right: 20px;
/*position:absolute; left: 1100px; bottom: 115px;*/
}


a.button4{
background:url(images/button.gif);
display:block;
color:#555555;
font-weight:bold;
height:30px;
line-height:29px;
margin-bottom:14px;
text-decoration:none;
width:191px;
position:absolute; left: 1100px; bottom: 120px;
}

a.button5{
background:url(images/button.gif);
display:block;
color:#555555;
font-weight:bold;
height:30px;
line-height:29px;
margin-bottom:14px;
text-decoration:none;
width:191px;
position:absolute; left: 720px; bottom: 120px;
}

a.button1{
background:url(images/button.gif);
display:block;
color:#555555;
font-weight:bold;
height:30px;
line-height:29px;
margin-bottom:14px;
text-decoration:none;
width:191px;
position:relative; left: 800px; top: 330px;
}

.checkbox {
	position:relative; left: 700px; top: 330px;
}

#button1{
display:none;
}

#block {
background: blue;
}
 
.next{
	background:url(images/arrow_right.png) no-repeat 10px 8px;
	text-indent: 45px;
	display:block;

}

.box1 {
top: 70px;
left: 50px;
width:250px;
height:250px;
overflow:auto;
background-color: white;
}	

div.scroll {
top: 25px;
left: 50px;
height: 335px;
width: 800px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}

/*add pos */
#contentWrapper {
	width:600px;
	height:400px;
	margin: 0px auto;
	position:relative;
}
#absposBtn {
	background:url(images/arrow_right.png) no-repeat 10px 8px;
	text-indent: 45px;
	display:block;
	position:absolute;
	left:480px;
	top:160px;;
}

Bruger #15047 @ 02.09.09 22:36

Okay. Det hjalp så på knappen. Men nu er alt det andet helt væk. Det er overhovedet ikke til at arbejde med nu. Dog ligger det inden for billedet, men alt anden er andre steder og de kan ikke komme op de bestemte steder. Eventuelt, fordi der er noget andet i vejen. Skal jeg prøve og sende eller poste min filer. Så kan I selv se det hele. Fordi jeg er sygt forvirreret.

Og jeg har jo lavet den der <h1></h1> der til at skrive alle mine informationer i. Sådan at det er nemmere for mig at styre. Som er selve den sorte box.

Indlæg senest redigeret d. 02.09.2009 22:42 af Bruger #15047

Bruger #11506 @ 03.09.09 09:11

190

ok jeg fjernede den h1 fordi du havde brugt den som en DIV.
Du mangler nogen wrappers og contentwrappers. prøv at se her fx.

http://www.communitymx.com/content/article.cfm?cid=A8BBA

Bruger #15047 @ 03.09.09 10:37

Den "wrapper" vil den erstatte min h1?

Bruger #11506 @ 03.09.09 10:42

190

Jamen din H1 er ikke super god som wrapper. Du skal kun bruge din H1 som overskriften til din side.
Men ja det vil den. wrapper er en box som 'holder' dit indhold på siden.

Bruger #15047 @ 03.09.09 10:49

Okay. Det lyder til at være okay.

Jeg har omdefineret min h1 til at indeholde indholdet på min side

Position erstatning?

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler