my web's URL
How to move the words in green frame into the red frame? I set up my css but
it doesn't change, where is the problem?
Where is the problem? and how to fix it??
Can you help me please to solve this problem?
Thanks in advance!
html code:
<div class="topmenu">
<a type="button" class="btn btn-flat text-white">儲存</a>
<a type="button" class="btn btn-flat text-white">陳核</a>
<a type="button" class="btn btn-flat text-white">退文</a>
<a type="button" class="btn btn-flat text-white">決行</a>
<a type="button" class="btn btn-flat text-white">關閉</a>
</div>
css code:
.topmenu {
text-align:center !important; }
In this case text-align: center !important won't work due to the fact that your element is not covering the whole navbar so it is centered already.
width: 100%; solution
So you should make your div maximize to its available space with width: 100%; and then use text-align: center; so the output should be something like this:
.topmenu {
text-align: center;
width: 100%;
}
NOTE: It won't perfectly work if you add extra elements to your navbar.
Margin auto solution
The other approach to achieve this is to force the div to have a specific space with their adjacents by using margin: 0 auto;. like this one:
.topmenu {
margin: 0 auto;
}
NOTE: Since you got an empty div in the left side of the nav elements <div class="search-form d-none d-lg-inline-block"></div>, this may look weird in the first place, but whenever you delete that empty div or try to import your search input within it you will see the results and would be working perfectly.
When going to the URL you provided and opening the DevTools, I can see that you have
<div class="navbar-right">
<ul class="nav navbar-nav">...</ul>
</div>
If you provide more samples of the code you're using, we can direct you better on what changes you need to make.
Width of your div is adapted to its content and pulled to right.
Try to do this in your css,
css code: .topmenu { text-align:center !important; width:100%;}
I don't know exactly what you mean, but in case you want to set your list in center vertically, you can use flexbox
.topmenu {
display: flex;
align-items: center;
}
Learn more about Flexbox
Related
I have a text field that I am trying to attach focus styling to and when focused, I want the box the expand and then include an "Add" button below the text area.
Both elements are on different levels (due to the existing structure of the code base). But I can't figure out how to hide/display the button when focusing on the text area. Here's an example of what I'm working with:
<form class='container'>
<div class='form-item'>
<div class='input-container>
<textarea id='addComment'></textarea>
</div>
</div>
<span class='button-wrapper'>
<button id='addCommentBtn'></button>
</span>
</form>
And here is the CSS/SCSS I've got
#addCommentBtn {
display: none;
}
#addComment {
transition: all 0.5s ease;
margin: 0.5em;
width: 95%;
}
#addComment:focus {
height: 10em;
margin-bottom: 2em;
}
#addComment:focus + #addCommentBtn {
display: block;
}
The expansion of the textarea on focus works as intended, but getting the button the change from display:none to display:block won't seem to work (I've tried a few different variations as well such as visibility).
If it comes down to it, I may have to adjust the Vue components, but this is last resort as it would require more tweaks/confirmation from project lead as the components are used in numerous areas and changes would affect those other areas as well.
ALSO: I would prefer not to use JQuery as well.
This should fix the problem. Flex will automatically adjust the height of container based on content.
function toggleButton(showFlag) {
document.getElementById('addCommentBtn').style.display = showFlag ? "inline" : "none";
}
.container {
display: flex;
flex-direction: column;
}
#addCommentBtn {
display: none;
}
<form class='container'>
<div class='form-item'>
<div class='input-container'>
<textarea id='addComment' onfocus="toggleButton(true)" onfocusout="toggleButton(false)"></textarea>
</div>
</div>
<span class='button-wrapper'>
<button id='addCommentBtn'>Add</button>
</span>
</form>
I am trying to select the glyphicon and make it centered. What would be the correct selector to style the glyphicon inside the span element?
<section id="intro" class="intro-section">
<div class="container">
<div class = "row">
<div class="col-md-12">
<div class = "well">
<h1</h1>
</div>
<a class="btn btn-primary btn-lg page-scroll" href="#employment" id="arrow"><span class = "glyphicon glyphicon-chevron-down"></span></a>
</div>
</div>
</div>
</section>
#arrow {
text-align: center;
}
You can add text-align:center to the parent of the link/glyphicon:
.row .col-md-12 {
text-align:center;
}
bootply example
If you are trying to manipulate only the tag with the Glyphicon in it, simply give the tag an ID and select it that way.
<span id="myStyledGlyph" class = "glyphicon glyphicon-chevron-down"></span>
Is this what you're trying to accomplish?
Alignment will be difficult on the Glyphicon directly, since it is in an tag and already within a
You could trying wrapping the entire tag in a tag and assign an id to that like this:
<div id="alignThisDiv"><a class="btn btn-primary btn-lg page-scroll" href="#employment" id="arrow"><span class = "glyphicon glyphicon-chevron-down"></span></a></div>
Cause id is unique you can use id selector as you did. Check DOM to see if there are more than one elements with id #arrow and if there are then change them. Cause id should be UNIQUE.
In your case you also need vertical-align: middle:
#arrow {
text-align: center;
}
#arrow > .glyphicon {
vertical-align: middle;
}
If the span contains text and you want to align it as center then text-align: center will work. As far as, I am getting from your question, the span having class glyphicon would have some image/icon as its background and you want to align the span as center.
Try following and see if this helps you -
#arrow .glyphicon{
width: 50%;
margin: 0 auto;
}
i have 2 images.My constraint is that I have to put a new div after the end of the 1st image.But they come on different lines.I googled a lot and found that float:left does the trick
I am already using it,but still they are coming in different lines.I dont know where I am going wrong.
Jsfiddle
span.tab {
padding: 0 50px; /* Or desired space*/
}
.span.tab {
display: inline-block;
float:left;
}
#div23 {
display: inline-block;
float: left;
}
#topdiv1 {
display: inline-block;
float: left;
}
#topdiv3 {
display: inline-block;
float:left;
}
html
<br />
<div id='topdiv1'><div id="widget1" class="sticky1">
<div id='topdiv3'>
<img src="https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50" />
<div id='div23'>
<span class="tab"></span>
<img src='https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50'/>
</div> </div>
Please help.
You don't apply the float to the parent container. You apply the float to the child elements:
#topdiv3 > * {
float:left;
}
http://jsfiddle.net/samliew/b9TWE/1/
If you want to remove the space between the images, remove the span.
http://jsfiddle.net/b9TWE/2/ this fixes it, you just need to have the <a> containing the first image to float
#topdiv3 > a{
float: left;
}
More on how floats work (great article)
By floating the first <a> containing the image you remove it from the regular document flow. the <div> containing the seconds image will resume the normal flow and position itself next to the <a>
Your topdiv3 must be closed before div div23.
<div id='topdiv1'>
<div id="widget1" class="sticky1">
<div id='topdiv3'>
<img src="https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50" />
</div>
<div id='div23'>
<img src='https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50'/>
</div>
</div>
</div>
http://jsfiddle.net/arunu/8gvvr/
I've tested it on firefox and it worked the way you did.
But anyway, your html markup is a little bit confuse, doesn´t it?
I have a web page im designing as a responsive web design.in there i have a div which contains the sign up button of a email sign up form.in IE this and the content after that doesnt show up. following is the problematic html code..
<div class="Sign_Up">
<button id="submit" class="bt btn btn-alt" type="submit">
</div>
and when i remove this code the site works fine
the css for the class is like this
.Social_Base .Social_Part .Detail_Box .Sign_Up .bt {
background: url("http://media.expedia.com/media/content/expaus/images/socialbar/Social_main_bg.png") no-repeat scroll -374px -43px transparent;
border: 0 none;
cursor: pointer;
display: block;
height: 33px;
margin-left: 18px;
text-indent: -9999px;
width: 122px;
}
please help me..its ie9..it should be okay..i have used a complete image and positioned it to get the image for the sign up button..if any1 could help..thanks
Try adding a close button tag.
</button>
you must complete this tag :
<div class="Sign_Up">
<button id="submit" class="bt btn btn-alt" type="submit">your text</button>
</div>
I am using a wrapper but I am pretty confused. I want the two resultbox divs to be in line with the submit div.
Take a look here:
http://jsfiddle.net/QtVwr/
What am I doing wrong?
I'm not very familiar with CSS.
Part of the problem is that there are issues with your HTML. Here's a start:
make sure all the divs are closed.
remove the floats from your css
add display:inline-block;
remove the inline styles from your HTML.
correct the .wrapper class to be .wrapper1 (matching the HTML)
So, this is more what you want, I assume:
.wrapper1 {
height:70px;
width: 800px;
background: #ffffff;
border: 1px solid grey;
color: #BDBDBD;
}
.resultbox {
width: 300px;
background: #ffffff;
color: #BDBDBD;
display: inline-block;
}
.submit {
height:15px;
width: 32px;
margin-top:10px;
background: #ffffff;
border: 1px solid;
color: #BDBDBD;
display: inline-block;
}
and the HTML
<div class="wrapper1">
<div class="resultbox" style="" >
<div class="locationresult" style="" form action="weezyresults.php" method="post">
<input type="text" name="search" size="36" value="" style="" />
</div>
</div>
<div class="resultbox" style="" >
<div class="locationresult" style="" form action="weezyresults.php" method="post">
<input type="text" name="search" size="36" value="" style="" />
</div>
</div>
<div class="resultbox" style="width:35px;" >
<div class="submit"></div>
</div>
</div>
Example: http://jsfiddle.net/QtVwr/2/
You will still need to fiddle with it. But this is a start.
To make div inline you should use the following CSS style:
.mydiv{ display: inline; }
Note: Change width of your wrapper (make it smaller) and you will see the results
There are several issues with the code you have provided.
you have defined css rules for a class wrapper but use class wrapper1 in your html
class wrapper doesn't have enough width for both of the result boxes plus the submit
There are extra quotes on the second result box style="margin-left: 5px; margin-top: 3px;""
form tags are malformed and being intertwined with your div tags
form tags aren't closed
locationresult div tag isn't closed
floats need to be cleared
here is a fiddle
http://jsfiddle.net/e3dg6/
The width of your results boxes combined exceeds the width of your wrapper. You need to either make the wrapper wider or reduce the width on the resultboxes.
Why do you have the submit div within a resultbox div?
Why the margin-left:10px, only with the first div?
I'd do it like this:
<div id="wrapper">
<div class="resultbox"></div>
<div class="resultbox"></div>
<div id="submit"></div>
</div>
And set the width and height of the wrapper, and let the other divs float. It's just a longshot, not exactly sure what you're trying to accomplish. I just think your nesting is not okay.