Let me stress that I'm no developer/coder at all and have almost no knowledge of code (even html). Yet I'm faced with a task to build a ABtest for certain pages of our website, using Virtual Webite Optimizer and need some help.
I have an iFrame topbar containg three elements - a logo on the left, a text-string (title) in the center and a button on the right. For the purpose of the text (to create the test variation) I need to "swap" the text with the button, ie. need the button in the center and the text-string on the right. Of course, I can drag the button within the VWO wysiwyg editor, but that way, the button became absolutely-placed and it will not be centered when displayed on different resolutions/devices. So how do I do this through the code? When I display the html code for the individual elements, I get this:
NAV
<nav class="simple-top-bar"> <div class="simple-top-bar__title"> <a class="logo vwo_1489874617112" href="http://Specimen.info" title="Specimen.info"> <img alt="Specimen.info" height="36" src="http://picture.net/pictures/logos/stickybar/xyz.svg"><span class="hide-for-small-only">Specimen.info</span> </a> </div> Contact us <div class="simple-top-bar__center show-for-medium vwo_1489927071979 vwo_1489873911537">Specimen</div> </nav>
Text (which I need to be aligned right)
<div class="simple-top-bar__center show-for-medium">Specimen</div>
Button (which I need to be horizontally centered):
Contact us
Thank you so much in advance for helping the noob out!
When in doubt about positioning, use... flexbox!
nav {
display: flex;
justify-content: space-around;
align-items: center; /* Depends */
}
Oh, and by the way, I would appreciate if you didn't fit all of the code on one line. It's hard to read.
Another way is to use float.
#logo {
float: left;
}
#text {
float: right;
}
#button {
margin: 0 auto;
}
The #logo and the #text will behave as exactly as absolute positioned in the way that they will be taken out of the normal flow.
Related
Sorry for my english.
I made a web component, kind of List View, and there is a button at its right. It shows only a item, when you click it, it grows and shows all the items:
The problem is, with display: inline-block when I click in the List View, it grows and pushes down the items below.
I tried to use display: absolute and bigger z-index when I click, but obviously this happens:
The button on the right moves left below the List View. While it is what i want:
Maybe it can be done putting a fixed location with JS, but, there is a easier way to do this with css?
Edit:
The buttons are inside a div, in this example called a-div.
This is the simplified code:
<div class="a-div">
<list-view style="display: inline-block;"class="wButton">
</list-view>
<button class="arrow-button" type="button">
<img src="images/arrow-right.svg" alt="">
</button>
</div>
CSS:
.a-div{
width: 50%;
display: flex;
}
.a-div > *{
margin-right: 1rem;
}
I could use a flex-end on the arrow button, but it will look like this:
a-divand b-div both are inside of another div.
And something important, the with of the List View is dynamic.
Hope you can help me, thanks on advance!
When you apply position: absolute to your list it goes outsite the flow so the button with the arrow is placed right under it. Add a margin-left to the button equal to the width of list (plus a little bit more)
I'm just trying to get the backgrounds touching on their long edge; like in this code, but with the two blues touching.
the code i have:
.header h1{ background:#0060D3; padding:10px; text-align:center}
.header h3{ background:#00CBFF; padding:10px; text-align:center}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>
You have to normalize the css (overwrite the default states of padding and margin properties).
* {
margin: 0;
padding: 0;
}
.header h1 {
background: #0060D3;
padding: 10px;
text-align: center
}
.header h3 {
background: #00CBFF;
padding: 10px;
text-align: center
}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>
As much as Kind User's answer solves your problem perfectly, you will still find yourself having to ask for help again next time a similar problem occurs. So rather than attempt to answer your question directly, I will explain how to figure it out for yourself.
Your browser will have an inspector (usually right click and choose Inspect from the context menu). I often use Firebug which is an extended inspector you can install as a plugin, but it is not essential for this task and the one built into your browser will suffice.
Click on the button on the top left of the inspector that looks like a cursor over a box, then click on any element on your screen to select it.
You will see under 'rules' all of the CSS rules that are currently affecting that element. Selecting the 'box model' tab will allow you to see the size of the element itself as well as the padding, border and margin on each side. Hovering your cursor over the element will also highlight each part of the box model separately so you can easily tell that the white space you saw was part of the margin.
To test this theory, you could go back to the rules tab and create a new rule stating margin:0px; and you will immediately see the effects. This is an effective technique for checking what CSS changes would appear to do before adjusting your actual file.
Side note: Just for clarification, although I would like to think it was obvious, I never make such assumptions. Any changes made in the inspector are entirely non-persistent in that they will not be saved in your file. If you refresh the page it will reload from the file and any changes made in the inspector will be gone.
I've a personal project to learn more about HTML/CSS/JS.
But I got a problem with it.
I have two divs in my <body>, each one with 2 circular concentric div. One is placed on the center of the area, the other one not.
<div id="sphaea_bloc">
<div id="actor" class="actor_locked">
<div class="actor_extern_locked"> </div>
<div class="actor_intern_locked"> </div>
</div>
<div id="lock" class="lock_locked">
<div class="lock_extern_locked"> </div>
<div class="lock_intern_locked"> </div>
</div>
</div>
The base placement is good.
The second step is to add drag'n'drop with JQuery, and it works fine. The aim is to drop the little div into the bigger div.
When it fails, it correctly returns at a base position.
But now, when the drop is good, I want to place with JQuery the little div in to center of the bigger div (making 4 circles concentric).
I searched for a long time but I didn't manage to do it without the problem : I've always a little offset between my 2 divs... And I'm not able to understand why.
Here is the fiddlejs link :
FiddleJS link
Someone can help me to find the problem, and why my little div is always inside the bigger but with an offset ?
Thanks in advance !
AeldredOni
i have did like below, and its working, it will be centered even if you change with and height of divs:
.actor_locked {
position:absolute;
left:-9999px;
right:-9999px;
top:-9999px;
bottom:-9999px;
display: block;
margin: auto;
width: 60px;
height: 60px;
border-radius: 50px;
}
http://jsfiddle.net/xga3dzfm/1/
¡Hello! I designed a Budget Calculator and implemented it in Drupal 7. You can see the result here:
http://www.delengua.es/curso-espanol-espana/calculadora-de-precios
I'm sure it has a lot of errors. But the one i want to fix is related to the position of the blocks. You may see that if you click on some option in the optgroup called "Cursos" (or in another one), you'll se an information square sided to the right of the table (i mean the table that contains the form). Specifically, if you click on "Cursos específicos" and you select something in the new optgroup, you'll get two information blocks. As you can see if you inspect them, they're positioned like this:
display: none;
position: absolute;
right: 6.5%;
top: 12.5%;
margin: 15px 15px;
width: 220px;
height: auto;
padding: 10px 10px;
Though that looks as working fine, it changes the position in firefox, and i'm frightened that it will cause more trouble. So my question is... would it be any other way to position it in relation to the table? I mean, the 'y' position should be the same as the table, and the 'x', the same + some number of pixels. I think it can be done through two ways:
a) With JavaScript (i don't know how, but i guess i could learn googling it).
b) Just with html and css.
As i prefer this option, i've tried to group the table and the information labels in only one '<div>', to declare the labels as 'inline:block;', to float them to the right, but when i do one of those things, i cannot modify the "top" position property. I got that ideas from other threads in Stackoverflow, but i don't know what can i try else. So i'll really thank any help.
Making a parent container position: relative will make the position: absolute on these elements relative to that parent container. Also, top/bottom/left/right attributes only apply for position: fixed, position: relative, and position: absolute. Floated elements ignore them unless one of those positions is defined, in which case the float is ignored.
I've tried something close to what you've said in the question and it worked for me without any problems.
First of all, wrap your form and infos in one div, like this:
<div id="wrap">
<form id="calculadoracont" method="post" onclick="test()">
// Your form
</form>
<div class="informacion" id="infoespecificos">
// Your info
</div>
<div class="informacion2" id="infoliteratura">
// Your info
</div>
// Your other infos
</div>
And in your css, just float them to where you want:
form {
float: left;
}
.informacion, .informacion2 {
// Remove the position absolute
float: right;
}
That will give you the same layout without absolute positioning.
Give it a try and let me know if it helps!
http://clifgriffin.com/blockade2/
Ok, I have an unordered list that serves as a list of menu links. In each li there is a div that is set to absolute positioning, bottom: 0. The idea is you hover over the link in the li and jQuery animates the height to show the hidden menu div.
It's a simple concept, but I am apparently confused.
The issue I'm having is that the div that contains the slide down menu doesn't take up any dimensions (according to Firefox and Chrome's calculated style information) when I put it in the li. If I put it anywhere else on the page it renders PERFECTLY. You can see what I mean from the link. The gray menu looking thing at the top is how it is supposed to render inside the li but doesn't.
<div class="ram">
<div class="gray_middle">
<ul>
<li>Guest Services</li>
<li>Concierge / Local Attractions</li>
<li>East Restaurant</li>
<li>Aquarium Lounge</li>
<li>Health Club</li>
<li>Sandcampers Program</li>
<li>Treasure Chest Gift Shop</li>
</ul>
</div>
<div class="gray_bottom">
<img src="images/top_menu_slidedown_gray_bottom.png" />
</div>
There is a bit of javascript going on that is supposed to find the height of the menu div and set the id of the containing li equal to the height so that it can be referenced later. Doesn't matter...the point is, when the div is in the li, its computed height is 0. When it is outside, it's correct.
Any ideas?
This is driving me absolutely batty. I have never had this many issues with something so simple.
Thanks in advance,
Clif
P.S. I added some HTML comments to the destination so that you can better see what I mean.
Absolutely positioned elements are "outside" of a container and can't really determine its size.
Relatively positioned elements impact container size (and content flow) but then they move elsewhere.
Also, for absolutely and relatively positioned elements, you should always give an explicit X,Y position. This avoids some rendering differences, cross browser.
Anyway, I made the following CSS changes and that submenu seemed to render OK on FF 3.6.4:
For <li id="49"> add: height: 230px; overflow: hidden; .
For div.subMenu add: top: 17px; and delete: bottom:0; .
For gray_middle add: height:160px; top:0; and delete: padding-top:20px; .
When you absolutely position an element, it won't expand the size of it's container to the size required to accommodate it.
EXAMPLE
HTML
<div id="outer"><div id="inner">In</div>Out</div>
CSS
#outer {
background-color: red;
}
#inner {
width: 100px;
position: absolute;
top: 100px;
background-color: blue;
}
See it live here - http://www.jsfiddle.net/r7MgY/86/
Hi clifgriffin Had a quick look at you HTML, shame you didn't give us the CSS aswell, but ... there are a few things I'm not sure on - the header says generator WordPress 2.9.2 but the html does look like "familiar" WordPress. If it is WordPress generated then check the wp_list_pages & wp_list_categories tags you are using. Also I serously recommend an upgrade to WP3.0 as it has MUCH more functionality (custome post/page types etc) plus a "built" in menu function.
I think you may be using too much CSS. Most of what you want to acheive can be done with a lot less.
Guest Services
Concierge / Local Attractions
East Restaurant
Aquarium Lounge
Health Club
Sandcampers Program
Treasure Chest Gift Shop
You can then give the ul an ID (remember ID's need to be unique) this will help with any Java you want to use also add to your ram class with a background image class images/top_menu_slidedown_gray_bottom.png. As you use the ram class again without the image. e.g. <div class="ram backgroundimageclass"> You are then saving a lot of "code" and download times etc.
If you give the ram class the attribute "position: relative;" you can then give the UL id the attribute "position: absolute;" the li's can be styled such as
ul#ID li {line-height 30px; etc ...)
ul#ID li:hover {line-height 30px; etc ...)
ul#ID li:hover a {line-height 30px; etc ...)
and so on.
Ohh forgot ... also why not add this code in the head
<meta http-equiv="X-UA-Compatible" content="chrome=1">
And this just after the tag
<!-- DO NOT REMOVE -->
<!-- THIS SECTION SETS THE LAYOUT FOR GOOGLE CHROME FRAME IF YOU NEED FURTHER INFO LOOK HERE http://code.google.com/chrome/chromeframe/ -->
<!-- Google Chrome Frame is a free plug-in that helps you enjoy modern HTML5 web apps within Internet Explorer. -->
<div id="prompt"><!-- if IE without GCF, prompt goes here --></div>
<script type="text/javascript">
CFInstall.check({
mode: "inline", // the default
node: "prompt"
});
</script>
<!-- END THE LAYOUT FOR GOOGLE CHROME FRAME -->
This allows "detection" of the browser and gives them the option (if not installed) to use Google Chrome Frame, you can:
Start using open web technologies - like the HTML5 canvas tag - right away, even technologies that aren't yet supported in Internet Explorer 6, 7, or 8.
Take advantage of JavaScript performance improvements to make your apps faster and more responsive. Enabling Google Chrome Frame is simple. For most web pages, all you have to do is add a single tag to your pages like above and detect whether your users have installed Google Chrome Frame.
If Google Chrome Frame is not installed, you can direct your users to an installation page.
If Google Chrome Frame is installed, it detects the tag you added and works automatically.
Cliff Just "totally" realised what you are trying to do here - sorry took so long to "twig"
OK you can do this with much more ease than you are trying to do at the moment. All it needs is a little JQuery and some basic CSS. No need to positions absolute etc.
In your CSS use { display: none; } for the class="subMenu" as you know this will "hide" it, I might also be tempted to do the same in your JQuery functions to be "doubly sure". Then in the JQuery create a mouseover effect (mouse over "better" than hover) for the class top_menu_links (I think you could take out the classes "aco" and "white_middle" or at least combine them in the css for the relevant ul) to show the .next('ul); you can slide it etc. Then a mouseout function on the ul. That way the ul stays visable until a mouse out event. I have done this quite successfully on a WP theme to display a "dynamic" list of categories on a mouse over event on a div made to look like a button. Sorry don't have the code to hand but will look later and "pass it over"
In addition you can set the ul background image as the approp. <img src="images/top_menu_slidedown_white_bottom.png" /> (or grey) just by setting it to background position: bottom repeat: none; and a bottom padding the height of the image. No need for alt tags etc.
Sorry been "out for a bit" anyhow here is a code I have used to "recreate" your bottom menu. It doesn't do as you suggest it closes after either a mouseout of the "menu item" or the "submenu". To get it to work on the top menu, just change the position from bottom to top:
$(document).ready(function() {
$('.indexMenu').mouseover(function(){
$(this).children().show();
$(this).children().mouseover(function(){
$(this).children().show();
});
});
$('.indexMenu').mouseout(function(){
$('.sub_menu').hide();
});
});
Here is the "html"
<div class="indexMenu">
Menu 1
<div class="sub_menu">
Item
<br />
Item
<br />
Item
</div>
</div>
<div class="indexMenu">
Menu 2
<div class="sub_menu">
Item
<br />
Item
<br />
Item
<br />
Item
</div>
</div>
<div class="indexMenu">
<div class="sub_menu">
Menu 3
<br />
Item
<br />
Item
<br />
Item
<br />
Item
</div>
</div>
<div class="indexMenu">
Menu 4
<div class="sub_menu">
Item
</div>
</div>
Obviously you can "use" any thing in submenu a ul,ol, etc...
And the "simple CSS
.indexMenu {
position: relative;
bottom: 3px;
width: 240px;
height: 32px;
float: left;
line-height: 30px;
border-top: 2px solid #FFFFFF;
text-align:center;
text-transform:uppercase;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
font-weight: 900;
color:#333333;
}
.sub_menu {
display: none;
position: absolute;
bottom: 33px;
width: 240px;
background-color:#DBF3FD;
opacity:0.8;
filter: alpha(opacity=80);
}
OK I've added a filter in the submenu to have a certain transparency
Gentleman,
Thanks for all of your responses! I'm sorry it took me so long to get back to this post.
This whole issue has revealed a few things I don't yet understand about the way HTML elements are rendered.
I was able to solve this problem by switching the main menu blocks to div elements instead of li elements.
This makes no sense to me in that both are rendered approximately the same way as far as I can tell from looking through the computed styles. But, for whatever reason, once the container is a div the contained divs rendered with their proper dimensions which allowed the rest of my code to work properly. I didn't even have to change the attached CSS!
As the main goal of this project was to finish and make the customer happy, I didn't experiment beyond this finding.
I welcome theories on why this would be.
Thanks again.
Clif