How to display text outside of the box of <div></div> - css

<div class="signup">
<div>Tenxian アカウントに必要な情報</div><br/>
</div>
<br/><br/><br/><br/><br/><br/>
<div align="center">#2009 Tenxian 利用規約
</div><br/>
<div align="center">Tenxian·English 腾闲·中国</div><br/><br/>
The code of .signup is:
.signup {
border: 1px solid #99CCFF;
position: absolute;
width: 700px;
height:450px;
left: 50px;
right: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
The problem is that
#2009 Tenxian 利用規約
Tenxian·English 腾闲·中国
is displayed in the box of <div class="signup"></div>, how to display it out of the box of <div class="signup"></div>?
I want to display
#2009 Tenxian 利用規約
Tenxian·English 腾闲·中国
at the bottom of a web page and outside of the box of <div class="signup"></div> . How to do it?
<div style="position:relative"><div align="center" >#2009 Tenxian 利用規約
</div><br/>
<div align="center">Tenxian·English 腾闲·中国</div><br/><br/>
</div>
does not work.

The problem is that your signup box is set to position:absolute. When you do this, the element is removed from the flow of the page.
The easiest solution is to simply not make it position:absolute. (If this is not possible, please revise your question so that more helpful answers can be posted.)
Your original code, simplified
<div class="signup">
<div>Tenxian アカウントに必要な情報</div>
</div>
<div class="footer">#2009 Tenxian 利用規約</div>
<div class="footer">Tenxian·English 腾闲·中国</div>
.footer {
text-align: center;
}
Note that my solution below does NOT require you to use this code. It works fine with your existing HTML markup. I'm posting this code so that future readers will be able to understand the markup more easily.
A possible solution
.signup {
border: 1px solid #99CCFF;
width: 700px;
height: 450px;
margin-left: 50px;
margin-right: auto;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
}
This makes your signup box take up the proper amount of space in the flow of the page. Here are the changes:
Remove position:absolute: This causes the signup box to display as a regular statically positioned box
Change left and right to margin instead: When a block-level box is displayed statically, it does is not affected by top, left, and so on. Instead, we use margins to push the box over to where we want it to be.

{overflow:visible;} might work

Related

Image Overlay Using Z-Index But Cannot See Elements Beneath

I'm trying to accomplish the following where I have some text on the left side of the page and an graphic on the right hand side.
https://i.stack.imgur.com/K5jAy.png
I'm using Bootstrap 4 and everything has been going well so far. However, when trying to incorporate the graphic into the site, I am running into two problems:
I always want the graphic to be positioned the same way no matter what screen size the website is being displayed on. Currently I am setting the graphic's width to 75%. When I preview on a smaller screen, the graphic is not even visible because the width is so small in regards to the width of the viewport. I am using absolute positioning, but this seems to change depending on the screen size.
When previewed on a larger monitor, the graphic displays on-top of my text. Now, I didn't think this would be a problem. I've saved my graphic as a png to allow for transparency and I've given my graphic a higher z-index than my text elements. However, the graphic seems to be like a block and covering my text elements, as seen here.
https://i.stack.imgur.com/wk5QX.png
Do you have any suggestions on how to fix either issue?
HTML:
<section class="header">
<div class="container-fluid p-4">
<img class="logo" width="52" height="57" src="img/BraydonCoyerLogoIcon.png" alt="Personal Logo">
<img src="img/decoration1.png" alt="Colorful Decorations" class="decoration">
</div>
<div class="container mt-5">
<div class="greeting">
<div>
<h1>Hi,</h1>
<h1>Some <span class="highlight">Text</span></h1>
<hr align="left"/>
</div>
</div>
</div>
CSS:
* {
background-color: #262628;
color: #eaeaea;
font-family: "Varela Round", Helvetica, Arial;
}
.greeting {
margin-top: 10em;
}
.greeting h1 {
font-size: 100px;
}
.highlight {
color: #f99e46;
}
.slogan {
font-size: 20px;
}
hr {
background-color: white;
width: 50%;
}
.decoration {
width: 75%;
position: absolute;
z-index: initial;
top: -150px;
left: 520px;
}
Try to use percentage for left position: left: 50%
Looks like your decoration image inherits background-color: #262628; from wildcard selector

I rounded my buttons via CSS and now they cascade

I used the two border options to round various buttons in my site and because of this, they now cascade by roughly one line break. (See image: http://gyazo.com/14af343dea8b280262f6c88465659c42 )
The HTML and CSS is pretty much the same for each button, so I posted an example. Any ideas on why this is happening (I imagine it's the div tags) and how I can stop it?
EDIT - JS Fiddle upload: http://jsfiddle.net/4phcS/
CSS:
#linkwordpress
{
color:white;
background-color:#5C0DAC;
font-family:Arial, Sans-Serif;
font-size:18px;
text-align:center;
width:100px;
height:30px;
position:relative;
top:-90px;
left:500px;
line-height:28px;
border:2px solid;
border-radius:25px;
}
HTML:
<div id="linkwordpress">
Wordpress
</div>
Don't use id's (#), use classes instead as follows:
.header {
color:white;
text-align:center;
background-color:#5C0DAC;
font-family:Arial, Sans-Serif;
font-size:30px;
padding:0px;
margin-bottom:10px;
height:38px;
width:800px;
border:2px solid;
border-radius:25px;
display: inline-block;
}
And use display: inline-block.
<div class="header">
Leon's CS150 Assignment
</div>
<div class="header">
Leon's CS150 Assignment 2
</div>
Your question is a little vague, but if I had to guess I would say that the fact that you are using a div is probably why.
Divs inherently have a display:block. Try changing the display to inline or inline-block.
#linkwordpress
{
color:white;
background-color:#5C0DAC;
font-family:Arial, Sans-Serif;
font-size:18px;
text-align:center;
width:100px;
height:30px;
position:relative;
top:-90px;
left:500px;
line-height:28px;
border:2px solid;
border-radius:25px;
display:inline;
}
or if your id #linkwordpress is just a container then add the display:inline; or display:inline-block; to the anchor inside of the div instead like so:
#linkwordpress a {
display:inline-block;
}
The best solution would be to remove the <div> from around the anchors entirely and negate the problem you are suffering with the display property. Like this:
<nav>
<div>
<a class="Menu-Item" href="#">Home</a>
<a class="Menu-Item" href="about.html">About</a>
<a class="Menu-Item" href="cv.html">CV</a>
<a class="Menu-Item" href="../wordpress">Wordpress</a>
<a class="Menu-Item" href="../webshop/catalog">Webshop</a>
</div>
EDIT:
After examining your code I noticed several issues you were running into that were breaking the navigation. I've attached a new JSFiddle that I think accomplishes what you are looking for and will attempt to explain some of the changes below:
http://jsfiddle.net/Incredulous/j4ZbT/
You had free floating elements in your <div id="container"> that needed to be put into another div and treated as a column.
I added 2 divs to your code:
<div id="col2">
<div id="sideboxhead">Who am I?</div>
<!-- lots of content here -->
</div>
<div id="col1">
<div id="header2">Home</div>
<!-- lots of content here -->
</div>
Then added the matching CSS to treat these as columns:
#col1 { float:left;width:644px;}
#col2 { float:right; width:145px;}
I also altered all of the width properties of divs in #col1 so that I could apply the width to the entire column instead.
I removed all of your top:XXpx; values because you were artificially attempting to create/reduce space and instead added a margin value to the nav element that can be negative instead.
Lastly I removed all of your left values and instead added float to the columns. If you still want the offset of your center content area you can add another container div around both of the #col2 & #col1, make its width less, then change the width of #col1 by the difference of old width - new width.
Hope this helps.
Update:
After reading your comment, the reason your items are vertical rather than horizontal is because the element that contains your navigation requires one of these two tags:
display: inline;
display: inline-block;
Those two items force the items to remain on the same line, rather then constantly drop to a new line. Think of a nesting doll, each doll is one layer deep diving further and further into the doll. Same applies to html, so to counter act that line drop per an element you modify the dimensions, float, or display to cater the design to your entire goal.
I'm still not entirely sure what your attempting to create, or do. Is this more inline of what your trying to accomplish? Fiddle
When you look at the code it isn't all that much different then yours. One of the primary differences, is that nav is simply a div but it is anchoring to the parent element. In this case header. So I define this element as a position: absolute; which will allow more finite control over the entire menu structure.
Then for large menu's and refactoring sometimes it is better to utilize a div over the traditional ul or plain a href. This will add a higher level of control yet again over your menu structure.
Also you'll notice that I don't use Id. That is because an Id is only allowed on a single page, it is unique. Which means it can't be utilized more than once. A class can be, which is more inline for a repetitive values throughout your page.
I'm still not entirely sure of your goal and or poor wording of the question, but hopefully this points you in the proper direction:
header {
width: 100%;
height: 100px;
background: #5C0DAC;
}
h3 {
font-family: Arial, Sans-Serif;
color: white;
text-align: center;
}
nav {
width: 100%;
height: 10%;
position: absolute;
left: 85px;
}
.Menu-Item {
width: 100px;
height: 30px;
padding: 10px 35px;
border-radius: 25px;
display: inline;
margin: 0px 15px;
box-shadow: 0px 3px 6px 0px;
position: relative;
}
a {
font-family: Arial, Sans-Serif;
text-align: center;
line-height: 28px;
color: white;
}
The html:
<header>
<h3>Leon's CS150 Assignment</h3>
<nav>
<div class="Menu-Item">
Home
</div>
<div class="Menu-Item">
About
</div>
<div class="Menu-Item">
CV
</div>
<div class="Menu-Item">
Wordpress
</div>
<div class="Menu-Item">
Webshop
</div>
</nav>
</header>

Why does the display function interfere with text-align?

Alright, so I'm trying to make a line of different text bits in html/css. This will be the precursor for a navbar. My HTML is:
<div id="navBar">
<p class="navBartext">About</p>
<p class= "navbartext">News</p>
<p class= "navbartext">Contact Us</p>
<p class= "navbartext">Jobs</p>
</div>
and the CSS:
.navBartext{
text-align: center;
color:black;
font-size: 20;
font-family: 'Poiret One', cursive;
display: inline;
padding-right: 20px;
}
#navbar{
width: 100%;
height: 50px;
}
Now, when I take the "display: inline;" out of the code, the text aligns vertically instead of horizontally, and then I can use text align to position it, but I want them all in one line. When I use display-inline though it seems to completely circumvent the text-align function (as anything put in here will be ignored). Is there something I'm missing? Perhaps I just don't know enough about the display function.
If you want to align the words horizontally, you have to use display:inline-block; so that the elements will be treated as text. Always use inline-block for the child elements and text-align:center; for the parent.
p{
color:black;
font-size: 20;
font-family: 'Poiret One', cursive;
display: inline-block;
padding-right: 20px;
}
#navbar{
width: 100%;
height: 50px;
text-align:center;
}
VIEW DEMO
Try this, you can use <ul> element instead of div, div is better as a wrapper if u need wrap navBar:
[http://jsfiddle.net/WT7qv][1]
http://jsfiddle.net/WT7qv

Div floating, postitioning

I have such html code:
<body style="text-align: center;">
<div style="background-color: #014156; text-align: center; width: 985px; margin:6px auto;">
<div style="background-color: #a6a6a6; width: 975px; background-image:url('shadow.gif'); background-repeat:repeat-x; background-position: center top; margin: 6px; overflow:hidden;">
<div style="float:left; width: 674px; text-align: center; color:#056c02; margin-left: 5px; margin-top: 10px; font-size: 20opx;" title="Product title"><span style="color: #d2ff00">"</span><span style="background-color: #d2ff00">[[Title]]</span><span style="color: #d2ff00">"</span><p style="text-align: left; font-size: 14px; margin-bottom: 5px;" title="Description">[[Description]]</p></div>
<div style="float:left; width: 301px; text-align: center; " title="General information (Image, stock, price)">[[Picture1]]<BR><SPAN style="FONT-SIZE: 9px; background-color: #FFFFFF;">Image is for illustrative purposes only. Please refer to product description.</SPAN></div>
</div>
Which results:
In Gray backgrounded div I need that two divs would align inline, and result would be like this:
What should I change, where is the problem?
P.s. my styles is described in tags because I dont have ability to use css for this because of some host reasons. So please don't start telling me about it :)
You need to lower the width of either the left div or the right div.
Lowering the first div to 650px for example fixes the problem.
Your logic was right: 674px + 301px does equal 975px but you didn't account for margins and padding and borders in those values. Make the "real" width less than or equal to 975px
Instead of float: left, try with display: inline-block, that should work.
You have a p tag which is a block lined up next to and inline span. Add either inline or inline-block to the p tag, depending on your requirements. Another possibility is you could change the p to a span.

Make divs auto-fill space

So I've been trying to figure out an issue with my divs here; how to translate my design into the actual layout, and I've not had much luck with research or implementation. In the attached link, where you see //PORTFOLIO and then a line extending to the edge of the content area, there's a red line. Right now I have both the //PORTFOLIO and red line divs set to a specific pixel width, but I want to be able to have both divs auto-set their width (the first to automatically set its width based on how much the //TITLE takes up, and the second to fill the remaining space in the container) since I'll have other sections of the website doing the same thing, and don't want to measure specifically for each area. Any suggestions are most welcome, thank you so much!
Example
See: http://jsfiddle.net/GmtMK/1/ (change the width of the browser window)
<div id="columnA">
<div id="title">//Portfolio</div>
<div id="line"></div>
</div>
#columnA {
font-family: 'ProximaNovaRegular', Geneva, sans-serif;
font-size: 19px;
text-transform: uppercase;
color: #C10000;
margin-bottom: 20px;
letter-spacing: 4pt;
}
#title {
float: left
}
#line {
overflow: hidden;
height: 9px;
border-bottom: 1px solid #c10000;
}
First, let me complement you on your website, it looks nice and stylish!
Secondly, I have a solution for you, using display: table css property, however, it requires adding an <hr /> element is it won't let you have cells of uneven height:
<div id="columnA">
<div id="title">//Portfolio</div>
<div id="line"><hr /></div>
</div>
#columnA {
width: 400px;
display:table;
}
#title {
display:table-cell;
width: 175px;
}
#line {
display:table-cell;
width: auto;
}
hr {
background-color: #C10000;
height: 1px;
border: 0;
}
Please see full example: http://jsfiddle.net/GmtMK/

Resources