I want to align the text in my div ('what' and 'where') but now that I have the text a the bottom it has pushed the divs (search-field1 and searchfield2) further down the page!
How can I have it so the text doesnt affect this? Is it something to do with the cellpadding/spacing?
Sorry im not the best at CSS I'm teaching myself it.
HTML:
<center>
<div class="what"><p>what?</div>
<div class="where">where?</div>
<div>
</center>
<center>
<div class="search-field1">
</div>
<div class="search-field2">
</div>
</center>
CSS:
.what{
display: inline;
font: 16px HelveticaNeue-Light;
color: #A9E2F3;
font-weight: bold;
height: 35px;
width: 320px;
background: #151515;
display: inline-block;
vertical-align: center;
}
.where{
display: inline;
font: 16px HelveticaNeue-Light;
color: #A9E2F3;
font-weight: bold;
height: 35px;
width: 320px;
background: #ffffff;
display: inline-block;
verticle-align: center;
}
.search-field1{
height: 35px;
width: 320px;
background: #ffffff;
border:1px solid;
border-color: #BDBDBD;
display: inline-block;
verticle-align: center;
}
.search-field2{
height: 35px;
width: 320px;
background: #ffffff;
border:1px solid;
border-color: #BDBDBD;
display: inline-block;
horizontal-align: center;
}
Thanks!
James
James is this what you are looking for? http://jsfiddle.net/jkeyes/WFPK2/
Set the line-height for your containers (in this case .what and .where to be the same as the height:
line-height: 35px;
sounds like you need float:left on your center tags
Html:
<div class="center">
<div class="what">what?</div>
<div class="where">where?</div>
</div>
<div class="center">
<div class="search-field1"></div>
<div class="search-field2"></div>
</div>
CSS:
If you use float:left on the enclosing div's it will allow the two center div's to float side by side.
.center {
float:left;
}
Another option would be to set your line height to zero on the hidden div like so:
line-height: 0px;
Then add padding to the surrounding divs. Like so:
padding-top: 10px;
Hope that helps someone.
Related
I am dealing with text blocks (background blocks over text) and face some issues with paddings on new line. The problem occurs when the browser(e.g. mobile) cuts the text into to two lines due to lack of width. text then looks like this:
I don't really know how to set a padding css on the end of the new lines, since it could break up anywhere of the sentence. You could say put a span on it with padding, but it is not fixed where the line will break down. It depends on the width. Any recommendations?
You could apply display: inline-block but that will turn the background color into an ugly box which doesn't look as nice as having an exact width background for each line. Unfortunately CSS doesn't let us target individual lines except for the first one.
If you don't mind getting a little "creative" (or hacky) you could wrap each word in its own element in the backend or using JavaScript and apply the background color to those elements. Adjust the parent's word-spacing accordingly to eliminate gaps.
.main {
font-family: sans-serif;
font-weight: bold;
background-color: #99c;
display: flex;
height: 400px;
flex-direction: row;
align-items: center;
}
.text-container {
max-width: 500px;
display: inline-block;
word-spacing: -15px;
position: relative;
padding-left: 20px;
overflow: hidden;
}
.text-container::before {
content: '';
background-color: black;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 100%;
z-index: 1;
}
span {
font-size: 36px;
line-height: 1.5em;
color: white;
background-color: black;
padding: 0.25em 0.5em 0.25em 0;
max-width: 360px;
}
<div class="main">
<div class="text-container">
<span>A</span> <span>Movie</span> <span>in</span> <span>the</span> <span>park:</span> <span>Kung</span> <span>Fu</span> <span>Panda</span>
</div>
</div>
You can use box-shadow for this issue and display inline:
<div class="text">
<span class="text-container">A Movie in the park: Kung Fu Panda</span>
</div>
And css:
.text > span {
display: inline;
box-shadow: 25px 0 0 black, -10px 0 0 black;
background-color: black;
color: white;
}
Try to add after "Park:" and before "Kung"
padding workded!!!
change width by console browser and see result:
h1{
background-color: #ff6a6a;
padding: 33px;
display: inline-block;
word-wrap: break-word;
width:300px
}
<h1>rert ert erttttttttttttttt 00000000000000000000 dfgdfgd dfgdfgdft ertert </h1>
Use <p> tag to wrap up the text and it apparently works demo
<div class="main">
<div class="text-container">
<p id="test">A Movie in the park: Kung Fu Panda</p>
</div>
</div>
css
.main {
font-family: sans-serif;
font-weight: bold;
background-color: #99c;
display: flex;
height: 400px;
flex-direction: row;
align-items: center;
}
.text-container {
max-width: 400px;
}
p {
font-size: 36px;
line-height: 2em;
color: white;
background-color: black;
padding: 0.5em;
max-width: 360px;
}
I want to use display:inline-block per this SO Post here so that a div will take the dimensions of its children.
It works as stated in the post. The problem I'm having is that now my centering is broken by this change.
I was centering the div using
margin: 0px auto;
I want the div centered and I also want it to take the dimensions of it children.
Here is the CSS for the containing div:
#container-1{
display: inline-block;
position: relative;
top: 50px;
width: 1000px;
margin: 0px auto;
background: rgba(255, 255, 255, 0.5);
}
Here is the HTML - just two p tags in a div.
<div id="container-1">
<p id='si_but' class='si_match blue_but radius_all medium_white'>SignIn</p>
<p id='su_but' class='si_match orange_but radius_all medium_white'>SignUp</p>
</div>
and if needed the CSS for the 2 p tags:
.si_match{
cursor: pointer;
display: inline-block;
padding: 14px 14px;
text-decoration: none;
font-size: 14px;
}
#si_but{
position: relative;
left: 50px;
float: left;
}
#su_but{
position: relative;
right: 50px;
float: right;
}
Update:
The larger concern is why is my containing div about 200 px to the left. There is nothing indicating why this is.
Here you need to add a "text-align: center" to the parent element. So considering "< body >"to be its parent element.
body{
text-align: center;
}
#container-1{
display: inline-block;
position: relative;
top: 50px;
width: 1000px;
margin: 0px auto;
background: rgba(255, 255, 255, 0.5);
}
Here's the related HTML.
<body>
<div id="container-1">
<p id='si_but' class='si_match blue_but radius_all medium_white'>SignIn</p>
<p id='su_but' class='si_match orange_but radius_all medium_white'>SignUp</p>
</div>
</body>
Hope this helps. Cheers!!
You could add text-align:center to the body element:
body{
text-align:center;
}
Answer copied from here: CSS center display inline block?
You just need to use display table instead of inline-block.
#container-1{
display: table;
position: relative;
top: 50px;
width: 1000px;
margin: 0px auto;
background: rgba(255, 255, 255, 0.5);
}
text-align:center on the parent will center inline-block children.
Any misalignment is probaby related to the positioning you have applied. Just remove it along with the float.
#container-1 {
text-align: center;
}
.si_match {
cursor: pointer;
display: inline-block;
padding: 14px 14px;
text-decoration: none;
font-size: 14px;
border: 1px solid grey;
}
<div id="container-1">
<p id='si_but' class='si_match blue_but radius_all medium_white'>SignIn</p>
<p id='su_but' class='si_match orange_but radius_all medium_white'>SignUp</p>
</div>
The project is to create a micro-blogging website similar to Twitter. I chose to name the site Chirper (how clever of me). Each post is structured by a parent div, an avatar div and a content div. The avatar and content divs are displayed inline, but they are not aligned properly. Any help is appreciated.
HTML:
<div class="chirp">
<div class="chirp_avatar_region">
<img src="img/avatar/default.png" alt="Avatar" width="64" height="64">
</div>
<div class="chirp_content">
<p>
USER
<span class="timeStamp">2013-11-22 16:43:59</span>
</p>
<p>
COMMENT
</p>
<p>
ReChirp!
</p>
</div>
The div's aren't aligned how I want them to be (level and 100% of the parent).
I can't post images, so here is a link to an imgur page: http://imgur.com/Mn9mE5q
Relevant CSS:
body {
font-family: Verdana, Geneva, sans-serif;
color: #000;
background-color: #666;
font-size: 1em;
}
/* Containers */
div {
margin-top: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
border-style: solid;
border-width: 3px;
border-color: #000;
padding: 10px;
}
div.pane {
width: 70%;
background-color: 0099FF;
}
div.chirp {
border-width: 1px;
margin-bottom: -1px;
width: 80%;
padding: 5px;
}
div.chirp_avatar_region {
display: inline-block;
width: 10%;
height: 100%;
text-align: center;
/*border-style: none;*/
}
div.chirp_content {
display: inline-block;
width: 80%;
height: 100%;
/*border-style: none;*/
}
div.chirp_avatar_region > img, div.chirp_content > p {
margin-top: 0;
vertical-align: middle;
}
You can either float your inner divs then clear the float following the container
or
use vertical-align:top to position your divs at the top of the container
Not entirely sure, but what I think is happening is that by defining position:inline-block, it's putting them on the same line, and making the line-height the height of the chirp_content container. In a sense anyway.
Set to vertical-align:top; and it should solve it.
Ex.
.chirp_content, .chirp_avatar_region{ vertical-align:top; }
JS Fiddle
Give to the avatar_region a float: left, and remove its width: and height: setting. Remove the chirp_content div, it circumvents the inlining.
Given the following html:
<div class="body">
<div class="banner">
<div class="name">
<h2>
<a href="http://www.example.com">
<span class="bold">Test Link</span><br/>
</a>
</h2>
</div>
<div class="title">
<h3>A Connections Learning Partner Program</h3>
<p>Quality online learning for high school students in Oakland County and surrounding counties.
</p>
</div>
<div class="link">
Learn More
</div>
</div>
</div>
How can I vertically align .link a (the button) within .link without giving a height or width? Like this...
Here's my fiddle
Here is one way that you can do it. Your HTML is good, no need to change anything.
For the CSS:
.body { width: 920px; }
.banner {
background-color: #454545;
border-bottom: 3px solid #F9F9F9;
height: 100px;
margin: 0 0 5px;
padding: 0;
display: table;
}
.banner > div {
outline: 1px dotted yellow; /* optional to show cell edges... */
display: table-cell;
}
.banner .name {
width: 25%;
vertical-align: top;
padding-top: 25px; /* control top white space */
text-align: center;
}
.banner .name h2 {
color: #F9F9F9;
max-height: 55px;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.banner .title {
width: 50%;
vertical-align: top;
padding-top: 25px;
}
.banner .title h3 {
font-size: 15px;
font-weight: bold;
line-height: 15px;
margin: 0px 0 0 0;
padding: 0;
}
.banner .title p {
font-size: 12px;
max-height: 35px;
overflow: hidden;
margin: 0;
padding: 0;
}
.banner .link {
width: 25%;
vertical-align: middle;
text-align: left; /* set to left, center or right as needed */
}
.banner .link a {
margin-left: 25px; /* controls left offset */
background-color: #FA9800;
border-radius: 5px 5px 5px 5px;
cursor: pointer;
display: inline-block; /* use inline-block if you want to center element */
font-size: 12px;
font-weight: bold;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration: none;
width: 100px;
}
See the fiddle at: http://jsfiddle.net/audetwebdesign/jsG8F/
How This Works
The trick is to use display: table on your .banner container and then display: table-cell on your child div elements, and set the % widths to 25%, 50%, 25% respectively for .name, .title, .link.
You can then use vertical-align and text-align to control vertical and horizontal placement of the various text blocks.
I added comments related to using padding-top to control white space from the top of the banner.
For the .link a element, you can adjust the left margin (or right) as needed.
These CSS rules offer you a lot of fine control over the placement of the various elements within the banner.
Backwards Compatibility
The display: table-cell property is backwards compatible back to IE8.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/display
If the size of the element and banner are fixed, use margin-top to offset the element.
Marc Audet was very close but I ended up going a slightly different route.
I gave .link a a fixed top margin and made margin-left: auto; and margin-right: auto; and that did the trick.
Here is the fiddle for reference.
This question already has answers here:
How to arrange many <div> elements side by side with no wrap [duplicate]
(3 answers)
Closed 8 years ago.
Here is my code:
<div class="large-6 columns">
<div id='box1'>
<div id='text1'>
Name
</div>
<div id='text3'>
LastName
</div>
</div>
</div>
CSS looks like this:
#box1 {
float: left;
height: 125px;
margin-top: 30px;
margin-bottom: 30px;
clear: none;
width: 125px;
border-top-left-radius: 95px;
border-top-right-radius: 95px;
border-bottom-right-radius: 95px;
border-bottom-left-radius: 95px;
background-color: rgb(232, 68, 58);
position:relative;
overflow:visible;
}
#text1 {
float: left;
font-size: 1em;
color: rgb(255, 255, 255);
width: 28%;
height: auto;
text-align: right;
font-weight: 400;
line-height: 1em;
word-wrap: break-word;
margin-left: 69.6%;
margin-top: 53px;
clear: none;
min-height: 0px;
min-width: 0.5em;
font-family: snippet;
overflow:auto;
}
#text3 {
float: left;
font-size: 1em;
color: rgb(0, 0, 0);
width: 72%;
height: auto;
text-align: right;
font-weight: 400;
line-height: 1em;
margin-left: 125px;
margin-top: 0px;
clear: none;
min-height: 0px;
min-width: 0.5em;
font-family: snippet;
position:relative;
overflow:visible;
}
Now this is not giving me the required result.
The Text-3 should actually appear next to the text-1. But somehow its wrapping down to the next tine.
btw. I am using this inside a Zurb Foundation code. Writing my custom class on top of the existing CSS styles.
EDIT:
Although I solved the problem, just for the clarity of some of you, Text-1 is inside the circle and is right aligned to the edge of the circle. Text-3 is outside the circle and is left aligned to the edge of the circle. Such that the two text, are next to each other, one inside the circle and one outside.
Is there a reason you are adding the margin-left to each div? Cleaned it up a little and it seems to work.
#text1 {
min-width: 0.5em;
width: 28%;
color: white;
}
#text3 {
min-width: 0.5em;
width: 72%;
color: black;
}
.inner-box {
float: left;
margin-top: 53px;
text-align: right;
font-weight: 400;
font-size: 1em;
line-height: 1em;
}
http://jsfiddle.net/ferne97/8FzN5/1/
Also think about creating a re-usable class for all that code that is getting repeated in each inner div.
http://jsfiddle.net/tahdhaze09/7FM82/
CSS:
#box1
{
width:980px;
float:left;
}
#text1{
width:450px;
float:left;
background-color:#45e64c;
}
#text3{
width:400px;
float:left;
background-color:#edc321;
}
HTML:
<div class="large-6 columns">
<div id='box1'>
<div id='text1'>
Name
</div>
<div id='text3'>
LastName
</div>
</div>
</div>
Text boxes, side by side. I left out the other CSS for simplicity.
Here's how to do this with Foundation's native architecture:
<div class="large-6 columns">
<p>Some content</p>
</div>
<div class="large-6 columns">
<p>Some more content</p>
</div>
This will give you two containers, side-by-side, spanning the full width of 960px.
I tried out the code on W3C school's
try it editor.
Your question does not really describe what you were expecting to see. Of course the "Name" and "Last name" beside each other. But within the circle? to left of it ?
I would recommend trying out the css on W3C's try it editor and playing around with the margins (margin-top, margin-left) and widths. Suggest starting by removing the margins and widths completely from the above css and then adding them one at a time. Of course check the try it editor for the changes due to each of the margin / width additions.