 The Paragon Wiki Archive documents the state of City of Heroes/Villains as it existed on December 1, 2012.
|
Difference between revisions of "User:Eabrace/Hidden Overlaps"
From Paragon Wiki Archive
m (setting up NavFrame divbox) |
m (→Experiment Five) |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
Trying to find out why NavFrame divboxes overlap other boxes and how to prevent this from happening. | Trying to find out why NavFrame divboxes overlap other boxes and how to prevent this from happening. | ||
| + | |||
| + | == Experiment One == | ||
| + | {{Zone | ||
| + | |{{Hero Hazard Zone}} | ||
| + | |Zone Name=Firebase Zulu | ||
| + | |Zone Map=Map_FirebaseZulu.jpg | ||
| + | |Type of Zone=Hero Hazard Zone | ||
| + | |Level Range=40-44 | ||
| + | |Trainer=''none'' | ||
| + | |Task Force Contact=[[Dr. Quaterfield]] | ||
| + | |Event=''none'' | ||
| + | |Exploration Badges=''none'' | ||
| + | |Plaques=''none'' | ||
| + | |Day Jobs=[[Dimensional Explorer Badge|Dimensional Explorer]] | ||
| + | |Enemies=[[Crey]], [[Nemesis]], [[Soldiers of Rularuu|Rularuu]], [[Shadow Shard Reflections|Shadow Shard Reflections]] | ||
| + | |Connecting Zones=[[Cascade Archipelago|Cascade Archipelago]], [[The Chantry|Chantry]], [[Peregrine Island|Peregrine Island]], [[The Storm Palace|Storm Palace]] | ||
| + | |Lines=''none'' | ||
| + | |VidiotMaps File=firebase_zulu | ||
| + | }} | ||
| + | |||
| + | Placing some text here to bump the NavFrame down a bit. | ||
| + | |||
| + | This should make it easier to see the overlap against the Zone infobox on the right side of the page. | ||
<div class="NavFrame" style="border:none;"> | <div class="NavFrame" style="border:none;"> | ||
| Line 5: | Line 28: | ||
<div class="NavContent" style="font-weight:normal; background-color:transparent; text-align:left; display:none; padding: 5px; border: solid 1px #222299; border-top: 0px;">Content text.</div> | <div class="NavContent" style="font-weight:normal; background-color:transparent; text-align:left; display:none; padding: 5px; border: solid 1px #222299; border-top: 0px;">Content text.</div> | ||
</div> | </div> | ||
| + | |||
| + | {{clr}} | ||
| + | |||
| + | == Experiment Two == | ||
| + | {{Infobox Contact | ||
| + | |name=Shadowstar | ||
| + | |image=Shadowstar.jpg | ||
| + | |img_capt=Warshade Facilitator | ||
| + | |zone=[[Galaxy City]] | ||
| + | |x=696.5|y=64|z=-953 | ||
| + | |levels=1-50 | ||
| + | |introed=[[Coyote]] | ||
| + | |intros=[[Kip Cantorum]] | ||
| + | |enemies={{Enemy Circle of Thorns}} | ||
| + | {{Enemy Clockwork}} | ||
| + | {{Enemy Council}} | ||
| + | {{Enemy Freakshow}} | ||
| + | {{Enemy Hydra}} | ||
| + | {{Enemy Outcasts}} | ||
| + | {{Enemy Trolls}} | ||
| + | {{Enemy Vahzilok}} | ||
| + | }} | ||
| + | |||
| + | Placing some text here to bump the NavFrame down a bit. | ||
| + | |||
| + | Using a contact infobox this time to see whether the overlapping behavior is identical or if it's something peculiar to the interaction with zone infoboxes. | ||
| + | |||
| + | <div class="NavFrame" style="border:none;"> | ||
| + | <div class="NavHead" style="font-weight:bold; background-color:transparent; text-align:center; background: #CCCCFF; border: solid 1px #222299;">Header Text</div> | ||
| + | <div class="NavContent" style="font-weight:normal; background-color:transparent; text-align:left; display:none; padding: 5px; border: solid 1px #222299; border-top: 0px;">Content text.</div> | ||
| + | </div> | ||
| + | |||
| + | {{clr}} | ||
| + | |||
| + | == Experiment Three == | ||
| + | |||
| + | [[File:Crnout tapestry01.png|right|200px]] | ||
| + | |||
| + | Placing some text here to bump the NavFrame down a bit. | ||
| + | |||
| + | Checking to see if the NavFrame will overlap an image this time. | ||
| + | |||
| + | <div class="NavFrame" style="border:none;"> | ||
| + | <div class="NavHead" style="font-weight:bold; background-color:transparent; text-align:center; background: #CCCCFF; border: solid 1px #222299;">Header Text</div> | ||
| + | <div class="NavContent" style="font-weight:normal; background-color:transparent; text-align:left; display:none; padding: 5px; border: solid 1px #222299; border-top: 0px;">Content text.</div> | ||
| + | </div> | ||
| + | |||
| + | {{clr}} | ||
| + | |||
| + | == Experiment Four == | ||
| + | |||
| + | [[File:Crnout tapestry01.png|right|200px]] | ||
| + | |||
| + | <div style="float:left"> | ||
| + | Placing some text here to bump the NavFrame down a bit. | ||
| + | |||
| + | All content between the image and the end of the NavFrame are enclosed in a float:left divbox this time. | ||
| + | |||
| + | <div class="NavFrame" style="border:none;"> | ||
| + | <div class="NavHead" style="font-weight:bold; background-color:transparent; text-align:center; background: #CCCCFF; border: solid 1px #222299;">Header Text</div> | ||
| + | <div class="NavContent" style="font-weight:normal; background-color:transparent; text-align:left; display:none; padding: 5px; border: solid 1px #222299; border-top: 0px;">Content text.</div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | More text to see where the boundaries are on the region that seems to have been created in between the image and the NavFrame. | ||
| + | {{clr}} | ||
| + | |||
| + | == Experiment Five == | ||
| + | |||
| + | [[File:Crnout tapestry01.png|right|200px]] | ||
| + | {{clrl}}<div style="float:left; border:solid 1px #000000"> | ||
| + | Placing some text here to bump the NavFrame down a bit. | ||
| + | |||
| + | Border added to float:left divbox this time. | ||
| + | |||
| + | <div class="NavFrame" style="border:none;"> | ||
| + | <div class="NavHead" style="font-weight:bold; background-color:transparent; text-align:center; background: #CCCCFF; border: solid 1px #222299;">Header Text</div> | ||
| + | <div class="NavContent" style="font-weight:normal; background-color:transparent; text-align:left; display:none; padding: 5px; border: solid 1px #222299; border-top: 0px;">Content text.</div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div style="border:solid 1px #000000;">More text to see where the boundaries are on the region that seems to have been created in between the image and the NavFrame. This time this text is enclosed in its own divbox with a border. This border seems to span the entire width of the page, overlapping both the image and float:left box. I'm finding it particularly odd that the text does not overlap the right and left floating boxes, but the boundary of the box itself does.</div> | ||
| + | {{clr}} | ||
| + | |||
| + | Observations: | ||
| + | * When viewed with ?action=render, the layout looks different from what I get on the wiki. | ||
| + | * Checking the generated source code, I find that the divbox containing the image is not created with style="float:right", but is instead created with class="floatright". I didn't expect that. | ||
Latest revision as of 21:39, 2 September 2009
Trying to find out why NavFrame divboxes overlap other boxes and how to prevent this from happening.
Experiment One
 Hero Hazard Zone (40-44) | |
| Trainers: | none |
|---|---|
| TF Contacts: | Dr. Quaterfield |
| Events: | none |
| Exploration Badges: | none |
| Plaques: | none |
| Day Jobs: | Dimensional Explorer |
| Enemies: | Crey, Nemesis, Rularuu, Shadow Shard Reflections |
| Connecting Zones: | Cascade Archipelago, Chantry, Peregrine Island, Storm Palace |
| Transits: | none
|
Placing some text here to bump the NavFrame down a bit.
This should make it easier to see the overlap against the Zone infobox on the right side of the page.
Header Text
Experiment Two
| Shadowstar | |
|---|---|
 Warshade Facilitator | |
| Zone | Galaxy City |
| Coordinates | (696.5, 64, -953) |
| Level Range | 1-50 |
| Introduced By | Coyote |
| Introduces | Kip Cantorum |
| Enemy Groups |
 Vahzilok |
Placing some text here to bump the NavFrame down a bit.
Using a contact infobox this time to see whether the overlapping behavior is identical or if it's something peculiar to the interaction with zone infoboxes.
Header Text
Experiment Three
Placing some text here to bump the NavFrame down a bit.
Checking to see if the NavFrame will overlap an image this time.
Header Text
Experiment Four
Placing some text here to bump the NavFrame down a bit.
All content between the image and the end of the NavFrame are enclosed in a float:left divbox this time.
Header Text
More text to see where the boundaries are on the region that seems to have been created in between the image and the NavFrame.
Experiment Five
Placing some text here to bump the NavFrame down a bit.
Border added to float:left divbox this time.
Header Text
More text to see where the boundaries are on the region that seems to have been created in between the image and the NavFrame. This time this text is enclosed in its own divbox with a border. This border seems to span the entire width of the page, overlapping both the image and float:left box. I'm finding it particularly odd that the text does not overlap the right and left floating boxes, but the boundary of the box itself does.
Observations:
- When viewed with ?action=render, the layout looks different from what I get on the wiki.
- Checking the generated source code, I find that the divbox containing the image is not created with style="float:right", but is instead created with class="floatright". I didn't expect that.
