I have the following HTML code. http://jsfiddle.net/Lijo/wJX9C/
I need to align the contents (“HAI” and button) as center aligned. How do we correct it?
Note: It need to work in IE7, Chrome
<html>
<div id="popup" class="popup">
<div id = "poupContentLine1" class="poupContentLine">
HAI
</div>
<div id = "poupContentLine2" class="poupContentLine">
<input type="submit" name="ctl00$detailContentPlaceholder$btnClose" value="CLOSE" id="detailContentPlaceholder_btnClose" />
</div>
</div>
</html>
Style
.popup
{
width:530px;
background-color:#ffffff;
border:3px solid Orange;
padding: 10px 5px 10px 5px;
margin: 0px 0px 0px 0px;
}
poupContentLine
{
width:530px;
height:auto;
text-align:center;
margin: 0px 0px 0px 0px;
}
you missed a .
.poupContentLine
since it's a classname — example fiddle: http://jsfiddle.net/wJX9C/2/
First, remove the popupcontentline styling; it's unnecessary. Then add text-align: center to .popup. Also, shorten it to margin: 0; (irrelevant to your problem, but all those "0"s aren't necessary and lengthen your code.)
Example: http://jsfiddle.net/wJX9C/10/
.popup
{
width:530px;
background-color:#ffffff;
border:3px solid Orange;
padding: 10px 5px 10px 5px;
margin: 0;
text-align:center;
}
Note: the HTML can also be simplified, but I didn't do anything with that.
Related
I have a long code which I want to use on multiple random pages of my website. Copying and pasting it everywhere is a tough job for me. So, I want to assign a value to it using javascript. If I use that value, entire code should be executed. I tried to use document.getElementById and tried to insert the entire code in innerHTML which didn't work out. Here's the code which I want to assign the value for.
<style>
.container {
height: 40px;
border: 1px solid black;
width: 250px;
padding: 5px;
font-size: xx-small;
white-space: nowrap;
border-radius: 50px;
background: #e6e7ee;
box-shadow: inset 5px 5px 10px #a3a3a3, inset -5px -5px 10px #dddddd;
}
img {
margin-right: 5px;
border-radius: 50px;
box-shadow: 5px 5px 10px #a3a3a3, -5px -5px 10px #dddddd;
border: 1px solid silver;
}
</style>
<div class="container">
<img border="0" align="left" data-original-height="884" data-original-width="800" height="40px" src="https://1.bp.blogspot.com/-GbF0Uslf3Uo/XyEjbgr6hCI/AAAAAAAADFg/dziRURov-J0QMftcWgx5N_lEpIP7jjMGgCPcBGAYYCw/s320/Screenshot_2020-07-25-23-27-02-1.png" width="40px" />
- Becky Lynch<br />
- Wrestler<br />
- WWE
</div>
If I type <div id="becky"></div> on any page, The above code should be executed. Is there any option available?
The header covers my websites and half of my opening welcome is covered, what css properties can I use or changed can I make to fix this?
I was experimenting my stuff and now it looks weird. You can see it at http://algninja.000webhostapp.com/
body {
background: purple;
}
div.a {
margin:25px 10px 25px 10px;
text-align: center;
background: gold;
color: purple;
border-radius: 10px;
padding: 5px 25px;
}
#header {
position:fixed;
left:0;
top:0;
width:100%;
background-color:#13AFF2;
z-index:2;
}
button.projectsbutton {
color: purple;
border:none;
background: gold;
padding:15px 32px;
font-size: 20px;
}
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id = "header">
<button onclick = "window.location.href = 'https://google.com';"class = "projectsbutton"><b>projects</b></button>
</div>
<div class = "a">
<h1>Welcome to my website</h1>
<h3>Look around, and see what u can find</h3>
</div>
</body>
</html>
You can add the following to div.a
position: relative;
top: 100px; /* or whatever value you like */
or you can increase to top margin value from div.a if you change the margin line from
margin: 25px 10px 25px 10px;
to
margin: 100px 10px 25px 10px;
I'm trying to had a button that in it's non-selected state looks just like a plain undecorated link.
When a user clicks on it I want to apply an class called "active".
In the active state, I want the left border of the button to turn blue.
Here is how I have my scss, but it's not working:
.case-nav-link {
display: block;
min-width: 200px;
font-size:16px;
border:1px solid gray;
margin:10px;
padding:15px 10px;
border-left:solid 6px transparent;
&.active {
border-left:solid 6px blue;
}
}
You shouldn't use a <a> for this purpose if you want the class to be added on click, use <button type="button"> or <span> if you add it when page load your code works. check this fiddle
something
.case-nav-link {
display: block;
min-width: 200px;
font-size: 16px;
border: 1px solid gray;
margin: 10px;
padding: 15px 10px;
border-left: 6px solid transparent;
box-sizing: border-box;
&.active {
border-left: 6px solid red;
}
}
i think you need to use something like jQuery to add the class in a click event
$(document).ready(function() {
$('.case-nav-link').on("click", function(e) {
e.preventDefault();
$(this).addClass('active');
})
})
.case-nav-link {
display: block;
min-width: 200px;
font-size:16px;
border:1px solid gray;
margin:10px;
padding:15px 10px;
border-left:solid 6px transparent;
}
.active {
border-left:solid 6px blue;
}
/* added for testing */
.container {width:500px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<a class="case-nav-link" >Link</a>
</div>
i have a question about a div being longer then it's parent div.
My page is looking as followed:
<div id="wrapper">
<div id="top">
</div><!--/top-->
<div id="middle">
<div id="keep_up">
<div id="thread_menu">
<div id="new_thread">
New threads in here
</div>
<div id="active_thread">
Active threads in here
</div>
</div>
</div><!--/keep_up-->
</div><!--/middle-->
<div id="bottom">
</div><!--/bottom-->
</div>
And the css (Will skip the top div since that is working fine).
html,body {
margin: 0;
padding:0;
height:100%;
}
#wrapper {
min-height:110%;/*Did this, so the page will be a little longer already*/
position:relative;
}
#middle{
width: 80%;
margin-left: 10%;
padding-bottom: 30px;
}
#bottom {
color: white;
background:#000;
width:100%;
height:20px;
position: absolute;
bottom:0;
left:0;
text-align: center;
font-weight: bold;
}
#thread_menu{
float: left;
width: 17%;
}
#new_thread{
height: 80%;
width: 100%;
border-left: 2px solid black;
border-bottom: 2px solid black;
border-right: 2px solid black;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#active_thread{
height: 80%;
width: 100%;
margin-top: 5%;
border-left: 2px #000 solid;
border-bottom: 2px #000 solid;
border-right: 2px #000 solid;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
Now, i fill the active and new_thread div with 15 items that i retrieve from my database. Same with Active_thread div. However, on a big screen the results will show fine (As it should). But on a small screen (laptop) it shows it like this:
(The browser is not that big, you always need to scroll a little bit down in order to see the footer (See height: 110% in wrapper))
Question: how do i make my thread_menu push the footer down and keep it inside my wrapper or at least middle div?
(Used the tags Jquery and Javascript because i'm not sure how to solve this problem, and it might needs one of those).
Image EDIT:
Looks like #threadMenu is floated left, this pulls the element out of the flow of the document, so it will not effect the containing divs height!
You could use JS to get the #threadMenu height, then push the content down by this much, but thats not an ideal solution!
I'm assuming the 'menu-items' on the image is the #thread_menu in the CSS. When you float something in the CSS, you're taking it out of the flow. Meaning they won't listen to what it's parents has to say.
What you can do is use display: flex; flex-direction: row; on the middle, force #thead_menu to use a base of 17% by using flex: 0 0 17%.
See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for detailed information on how to use flexbox
Remove the following styles from #bottom
position: absolute;
bottom:0;
left:0;
Add a clearfix for #keep_up (see examples mentioned by Michael_B)
#keep_up:after {
content:"";
display:block;
clear:both;
}
JSFiddle Link
Note: changed id="Middle" to id="middle" in your fiddle example
Hi guys for some reason my text is not wrapping in Div, I have three divs placed inline-block and floating left. If i don't use floating left the the divs gets pushed down.
CSS code
#OuterSection
{
border-top: 10px solid #0272b0;
border-left: 5px solid #0272b0;
border-bottom: 5px solid #0272b0;
border-right: 5px solid #0272b0;
border-radius: 10px;
background-color: #0272b0;
width:250px;
height: auto;
display:inline-block;
}
#InnerSection
{
width:auto;
height:auto;
text-align:center;
background-color: #FFF;
border-radius: 5px;
text-align:left;
word-wrap: break-word;
float:left;
}
#SectionTitle
{
color: #FFF;
display: inline-block;
font-weight: bold;
margin-bottom: 5px;
}
HTML code here
<div id="OuterSection">
<span id="SectionTitle">section1</span>
<div id="InnerSection">
testtesttesttesttesttesttesttesttesttesttesttest
</div>
</div>
<div id="OuterSection">
<span id="SectionTitle">section2</span>
<div id="InnerSection">
</div>
</div>
<div id="OuterSection">
<span id="SectionTitle">section3</span>
<div id="InnerSection"></div></div>
#Section{display:inline-block;}
Fix can be found here: DEMO
Used word-wrap:break-word; on your innerSection with width:100%;