WN

WN (https://www.wn.se/forum/index.php)
-   Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)
-   -   CSS problem med sökfunktion. (https://www.wn.se/forum/showthread.php?t=1044756)

Kimppa 2010-11-10 17:22
CSS problem med sökfunktion.
 
Hej,

Har lite problem med en sökfunktion jag försöker implementera på en av mina hemsidor. Jag placerar sökmotorn på hemsidan i en tabell och när man söker efter något får man en lista efter man skrivit in 3 bokstäver.

Listan visas med hjälp av CSS:
style="position: relative;"

När jag använder "relative" så hamnar den där den ska hamna men den flyttar ner hela sidan så fort listan på sökresultat öppnas (innehållet på sidan hamnar under resultaten.)

Änvänder jag däremot "absolute" som position så hamnar den där jag vill att den ska hamna med top margin och left margin etc och då flyttar den inte innehållet utan visar sökresultaten över innehållet.

Det jag undrar över här är. Om jag nu använder mig av absolute och väljer att den ska vara 200px från top och 400px från left som exempel så ser det bra ut på min dator.

Men tänk så har någon en högre upplösning? Då hamnar den ju 400px från den upplösningens left eller har jag fått det om bakfoten?

Hoppas ni förstår vad det är jag menar, annars kan jag programmera några exempelsidor för att visa vad jag menar.

Tack på förhand!

daniel.s 2010-11-10 17:29
Kan du inte bara floata den i ett större element?

Kimppa 2010-11-10 17:32
Rätt ny på CSS men att floata den i ett större element innebär det att jag lägger till en relative CSS-box på en plats på sidan och sedan absolutar sökfunktionen i den boxen?

Eller kan det vara så enkelt att positionen heter Float?



EDIT:

Tack för hjälpen med float Daniel! Fick till det! :D
Du räddade min dag!


EDIT igen:

Verkade inte fungera iaf i slutändan :/ ...

Blir så här:
http://tidzon.se/Screen%20shot%2...44.41%20PM.png

Använder mig av dessa kodsnuttar:
index.php
Citat:
<style>

div#container {
float: center;
width : 1000px;
border : 0px dotted #ccc;
margin : 0 auto;
padding : 5px;
text-align : center;
}
</style>
Citat:
<div id="container">
<?php include('sok.php'); ?>
</div>
sok.php
Citat:
<style type="text/css">

h3 {
margin: 0px;
padding: 0px;
}

.suggestionsBox {
position: relative;
margin: 10px 0px 0px 0px;
width: 250px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
z-index: 0;
}

.suggestionList {
margin: 0px;
padding: 0px;
}

.suggestionList li {

margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}

.suggestionList li:hover {
background-color: #659CD8;
}
</style>
Citat:
<div>
<form>
<div>
<b>Sök:</b> <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>

<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="img/up.png" style="position: absolute; top: -12px; left: 100px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
&nbsp;
</div>
</div>
</form>
</div>


Ska försöka klura ut det själv men det uppskattas om någon tar sig tid för att hjälpa mig klura ut detta.

Edit3: Om jag istället för relative använder mig av absolute hamnar resultat-listan långt borta från sökrutan: www.tidzon.se/Screen%20shot%202010-11-10%20at%205.51.07%20PM.png

Kimppa 2010-11-10 18:22
Okej, jag lyckades få ordning på det nu! :)

Vänligen stäng denna tråd så jag inte återkommer :P!

Edit:
Om någon är nyfiken på hur jag fick till det så var det med hjälp av daniel.s tips och denna sida: http://www.barelyfitz.com/screencast...s/positioning/

wiB 2010-11-11 14:16
Lite offtopic kanske, men "center" är inget giltigt värde för float :)

Kimppa 2010-11-11 19:48
Citat:
Ursprungligen postat av wiB (Inlägg 20377537)
Lite offtopic kanske, men "center" är inget giltigt värde för float :)
Märkte det :rolleyes:


Alla tider är GMT +2. Klockan är nu 20:07.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson