eerder topic   volgend topic
  
Rollover box in de weg
10 november 2012 - 13:45   
geplaatst door: Robert Heemskerk
hi webdesign en internetforum,

Ik heb een rollover gemaakt (wat maak ik)

http://robertheemskerk.nl/knoptest5.html

Als je nu over de box heen scollt, dan wordt ie deels overlapt door de box waar de rolloverafbeelding in verschijnt.. Dat wil ik voorkomen, dat wil ik niet..

Hoe kan ik dit simpel oplossen?

Verder snap ik ook even niet waarom er nu een kader zichtbaar is van die box waarin de afbeelding in verschijnt, en dat vraagteken?

Mocht iemand een oplossing voor deze kwestie hebben dan hoor ik dat graag.

groeten Robert

(Bewerkt door Robert Heemskerk om 13:46, 10-11-2012)

Rollover box in de weg
10 november 2012 - 19:26    reactie #1
geplaatst door: orange
Er rolt bij mij helemaal niets over.

Daar zit de eerste fout dus al.

http://img87.imageshack.us/img87/6885/schermafbeelding2012111.png

Rollover box in de weg

n.b.: Oh, sorry. Dat bedoel je dus ook.  :tounge:
Ik zie nu de roll-over verschijnen ja.

Anyway... ik weet het niet.

(Bewerkt door orange om 19:28, 10-11-2012)

Sinds 12-01-1963.
Hobby > Music in Motion: www.drumcorpsinprogress.nl
Rollover box in de weg
11 november 2012 - 04:15    reactie #2
geplaatst door: Shmoo

geblokkeerd

Het is mij ook nog niet zo heel goed zichtbaar wat het moet worden maar ik denk wel dat het een stuk leaner kan.
in-line CSS gebruiken we al een tijdje niet meer dus dat moet je echt in een externe stylesheet gaan zetten.

Ik heb even snel iets gemaakt dat denk ik in de richting zit, puur HTML en CSS zonder afbeeldingen.

http://cssdesk.com/QnqXq

Zoals je ziet is de speech-bubbel nog niet helemaal netjes maar dat kun je hier en daar bijschaven aan de hand van de hoeveelheid tekst die erin komt.
Durf CSS waardes te veranderen en zie wat gaat gebeuren het is een Live editor.

Rollover box in de weg
11 november 2012 - 13:17    reactie #3
geplaatst door: Robert Heemskerk
Hartelijk bedankt Shmoo!

Ik ga er z.s.m. mee aan de slag.

groeten Robert

:thumbs-up:

Rollover box in de weg
15 november 2012 - 16:08    reactie #4
geplaatst door: Robert Heemskerk
Ik moet in ieder geval een Linked CSS sheet maken.

Ik wil het in Dreamweaver CS5 gaan maken, dat moet mogelijk zijn volgens mij.

groeten Robert

Rollover box in de weg
15 november 2012 - 16:38    reactie #5
geplaatst door: Shmoo

geblokkeerd

Ja hoor je moet alleen HTML gaan scheiden van de CSS dat zijn twee verschillende dingen.

Met HTML bouw je de website en zorg je dat bijv. teksten op het scherm komen  en CSS is voor het positioneren en stijlen-/opmaken van de layout.

Dus een extra nieuw leeg document aanmaken die je stylesheet noemt met de .CSS extensie daar plaats je alle CSS codes in.
En dat externe bestand spreek je dan aan in de HEAD van je HTML pagina op deze manier.

Code: [Selecteer]

<html>
<head>

<link rel="stylesheet" type="text/css" href="http://www.example.com/css/stylesheet.css">

</head>
<body>
...

http://www.w3schools.com/css/css_howto.asp

Rollover box in de weg
20 november 2012 - 10:03    reactie #6
geplaatst door: Robert Heemskerk
Bedankt voor jouw reactie Shmoo,

Ik heb nu een externe stylesheet gemaakt.
Het is nu ook een heel stuk overzichtelijker.
En ik begrijp er wat meer van nu.

Nu zit ik alleen nog met ''het probleem'' dat de hoover vd afbeelding een gebied afdekt van een andere link (overlapt).
Ik zou graag alleen de woorden(in voorbeeld' wat maak ik?, wie ben ik? etc.) actief willen maken zodat er geen overlapping meer is.

hierbij de situatie nu;

http://robertheemskerk.nl/testsite.html

(Bewerkt door Robert Heemskerk om 11:09, 20-11-2012)

(Bewerkt door Robert Heemskerk om 11:10, 20-11-2012)

Rollover box in de weg
27 november 2012 - 10:19    reactie #7
geplaatst door: Robert Heemskerk
Nogmaals bedankt Shmoo, voor jouw inzet!

- Ik ben nog bezig geweest om het d.m.v. rollovers in CSS te maken, met afbeeldingen maar het is beter denk ik om het tekstgedeelte als tekst te houden en dus niet te kiezen voor afbeeldingen (die worden ook ranzig bij vergroting)
- Verder nog gekeken of ik het kon oplossen via een CSS-rollover (CSS single of multiple elements remote area);
http://www.onextrapixel.com/2009/05/12/how-to-create-pure-css-rollover-to-display-single-or-multiple-elements-at-remote-area/

Maar dan kom ik toch uit op jouw opzet, de andere woden toch wat te ingewikkeld voor mij.

Ik heb de tekstballon versimpeld, in een cirkel.

Waar ik nu nog niet uitkom, is dat ik teksten wil bewerken (style) van zegmaar de vraag en het antwoord (in de ballon). Het liefst zou ik deze in een opzichzelfstaande CSS-style hebben staan.
Ook zou ik de stand vd tekst in de ballon willen aanpassen (verticale basislijn verschuiving?)
Ik wil meerdere van dit soort items op mijn pagina zetten en deze onafhankelijk van elkaar willen positioneren en stylen.

Misschien heb jij nog een goed idee of suggestie of kan iemand anders me een goede tip geven.

Hierbij nu een versie waarbij ik de voorgaande tekstballon heb gewijzigd in een nieuwe ballon (zonder aanhangsel aan de ballon)
http://robertheemskerk.nl/ballonnen.html

groeten Robert

(Bewerkt door Robert Heemskerk om 10:21, 27-11-2012)

(Bewerkt door Robert Heemskerk om 10:33, 27-11-2012)

(Bewerkt door Robert Heemskerk om 10:34, 27-11-2012)

Rollover box in de weg
4 december 2012 - 11:55    reactie #8
geplaatst door: Robert Heemskerk
In CSS Rollover met (soort van) speechballon gemaakt;

http://robertheemskerk.nl/Hover3.html

Ik probeer nu het ''aanhangsel'' te maken, aan de speechballon.
Dat lukt me niet. Het mag een heel eenvoudig soort aanhangseltje zijn.

Op het internet vindt ik wel allerlei voorbeelden van mooie speechballonnen(CSS) maar die zijn vooralsnog moeilijk te integreren in wat ik heb gemaakt.

Deze is wat tot nu toe het meest in de buurt komt:
http://robertheemskerk.nl/Hover.html

Maar dan zit ik met één hoek(rechtsonder) en dat de rand vh kader een uitsparing laat zien in de achtergrond (in de rode cirkel).

Weet iemand een ''simpele'' oplossing misschien?
Of hoe ik de speechballon beter kan integreren in mijn situatie?

groeten Robert


(Bewerkt door Robert Heemskerk om 11:56, 4-12-2012)

Rollover box in de weg
4 december 2012 - 12:50    reactie #9
geplaatst door: Shmoo

geblokkeerd

Wat je moet doen is een extra klein vierkantje onder de speechballon maken met dezelfde achtergrondkleur (grijs) als de ballon zelf. Daarna roteer je deze 45 graden zodat je een punt omlaag krijgt en als laatste positioneer je dit kleine gedraaide viertje iets over de speechballon heen.
Op deze manier dek je grijs op grijs af en blijft het puntje onderaan zichtbaar omdat deze op het rood van de website-achtergrond valt.

Zoek maar eens op Rotate CSS.
http://davidwalsh.name/css-transform-rotate

Rollover box in de weg
4 december 2012 - 13:16    reactie #10
geplaatst door: Robert Heemskerk
Dat lijkt me een goed idee!
Hoe kan ik dit vierkantje het beste toevoegen in of aan mijn CSS-rollover?

Ik heb zo'n vermoeden dat ik voor het vierkantje een extra div class moet aanmaken, zal er nog eens na kijken. (dus ook in mijn HTML)

Code: [Selecteer]
<aside id="WATMAAKIK">
<div class="watmaakik">Wat maak ik?</div>
<div class="WMIspeech">Logo, Huisstijl, Brochure, Boek, Folder, Kaart, Reclame</div>
<div class="WMIvierkantje">xxxxxxxxxxxxxxxxx</div>
</aside>

div#WATMAAKIK {
 position: relative;
 top: 205px;
 left: 0px;
 cursor: pointer;
 background-color: rgba(00,00,00,0.15);
}

#WATMAAKIK span {
 position: relative;
 top: 205px;
 left: -999px;
 cursor: pointer;
 background-color: rgba(00,00,00,0.15);
}

#WATMAAKIK:hover .WMIspeech {
 opacity: 1;
 left: 185px;
 top: 150px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 letter-spacing: 0.1em;
 width: 200px;
 transform: rotate();
 position: absolute;
 height: 50px;
 background-color: #CCC;
 visibility: visible;
}

/* the bubble */
.WMIspeech {
 position: absolute;
 width: 225px;
 line-height: 17px;
 /* vertically center */
color: white;
 text-align: center;
 border-radius: 10px;
 font-family: sans-serif;
 font-size: 12px;
 font-style: normal;
 padding-top: 10px;
 padding-right: 10px;
 padding-bottom: 10px;
 padding-left: 10px;
 letter-spacing: 0.2em;
 z-index: 9999;
 left: -400px;
}

.watmaakik {
 font-size: 24px;
 font-family: "Times New Roman", Times, serif;
 color: #C00;
 position: absolute;
 top: 250px;
 width: 175px;
 left: 100px;
 height: 25;
 letter-spacing: .1em;
 cursor: pointer;
}

(Bewerkt door Robert Heemskerk om 17:14, 4-12-2012)

(Bewerkt door Robert Heemskerk om 17:14, 4-12-2012)

(Bewerkt door Robert Heemskerk om 17:15, 4-12-2012)

(Bewerkt door Robert Heemskerk om 17:16, 4-12-2012)

Rollover box in de weg
5 december 2012 - 00:19    reactie #11
geplaatst door: Shmoo

geblokkeerd

Plaats dit in je stylesheet na de .WMIspeech class.

Code: [Selecteer]

.WMIspeech:after {
    position: absolute;
    content: "";
    left: 16px;
    bottom: -8px;
    width: 16px;
    height: 16px;
    background: #ccc;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

Gekeken naar het 'Hover3' voorbeeld met de Grey background.

Ik maak gebruik van een Pseudo :after element zodat ik geen extra div of class hoef aan te maken.
Maar wat het doet is vrij simpel na elke .WMIspeech class bovenstaande code importeren, dis een vierkantje van 16 X 16 pixels met een #ccc (grey) background, 45 graden roteren en via de position absolute plaats ik het bovenop je speechbubbel maar dan 16px vanuit links en -8px vanuit onderaan.

Rollover box in de weg
5 december 2012 - 08:51    reactie #12
geplaatst door: Robert Heemskerk
Helemaal geweldig!

''bos bloemen-smiley''

  
eerder topic   volgend topic