(If there is a simpler solution to this problem, please tell me)
I want this website to have 2 sections of text, one on each side of the screen.
I did this successfully. I used text align and translate3d to move the text to the right, then up.
The only problem was that the width of the the text on the right blocked the text on the left from being interacted with.
I decided to change the width of the text on the right side, and when I did, the text alignment wasn't working, because of the margins (the inspect said margins).
I decided to change the margins to 0, and nothing happened.
I have no idea why, but here is some code:
.mid{
margin: 0px 0px 0px 0px;
font-family:myfont;
font-size:150px;
}
.midl{
text-align:left;
}
.midr{
width:625px;
text-align:right;
transform:translate3d(0,-181px,0)
}
</div>
<div id="midwlink">
<p id="games" class="mid midl">Games</p>
<p id="calculators" class="mid midr">Calculators</p>
<p id="animations" class="mid midl">Animations</p>
<p id="pictures" class="mid midr">Pictures</p>
</div>
I later added this, but still nothing happened:
#calculator{
margin: 0 !important;
}
So, is there any possible way to have text on both sides of the screen at the same time, with them being separate from each other?
Or is there a way to COMPLETELY remove margins?
.mid {
margin: 0;
font-family: myfont;
font-size: 50px;
float: left;
width: 50%;
}
.mid:nth-child(even) {
text-align: right;
}
<div id="midwlink">
<p id="games" class="mid">Games</p>
<p id="calculators" class="mid">Calculators</p>
<p id="animations" class="mid">Animations</p>
<p id="pictures" class="mid">Pictures</p>
</div>
There are many ways to achive side by side layouts in HTML. One of the simplest is to use two divs side by side, as in this snippet.
div {
width: 49%;
display: inline-block;
}
div.right {
text-align: right
}
<div class="left">
Hello left
</div>
<div class="right">
Hello right
</div>
Could it be the wrong <div> tag in the beginning? You have started with a closing div tag.
If you fix that, then you get what you want it to do.
.mid{
margin: 0px 0px 0px 0px;
font-family:myfont;
font-size:50px;
}
.midl{
text-align:left;
}
.midr{
width:625px;
text-align:right;
transform:translate3d(0,-181px,0)
}
<div>
<div id="midwlink">
<p id="games" class="mid midl">Games</p>
<p id="calculators" class="mid midr">Calculators</p>
<p id="animations" class="mid midl">Animations</p>
<p id="pictures" class="mid midr">Pictures</p>
</div>
Related
I'm taking the Free Code Camp course thing and the first project is to create a tribute page to whoever. Mine is on J Dilla, my favorite hip hop producer. God rest his soul. Anyways I'm trying to use a bootstrap thumbnail around a picture of him, with the text/caption also inside the thumbnail. My problem is that it messes up the centering and aligns the thumbnail to the left and I have no idea how to fix it. Here's the relevant code:
<style>
.cool-text {
font-family: Lobster;
font-size: 20px;
}
.image-centering {
display: block;
margin-left: auto;
margin-right: auto;
}
.vertical-centering {
margin-top: auto;
margin-bottom: auto;
}
.gray-background {
background-color: lightgray;
margin: 20px 100px 20px 100px;
border-radius: 5px;
}
.white-background {
background-color: white;
margin: 10px 560px 10px 10px;
}
</style>
<div class="gray-background">
<br>
<h1 class="cool-text text-center">J Dilla</h1>
<h2 class="text-center"><i>The one and only</i></h2>
<br>
<div class="span8 offset2">
<div class="img-thumbnail thumbnails">
<img class="image-centering" src="http://media.lessthan3.com/wp-content/uploads/2014/02/j-dilla-lessthan3.jpg" alt="The man himself."</img>
<p class="text-center">Dilla working on something ill, I presume</p>
</div>
</div>
<br>
</div>
</div>
Also if there's anything glaringly terrible about my code, I'd love some input on how to reformat it. This is my first time asking a question on stack overflow so forgive me if this is the wrong way to do so.
I am fairly new to web development so I apologize if this is a "newbie" question, I've looked on various sites and tried various things but am not able to move a button on my page to where I want it to go.
Here's the code I have for it in HTML:
<div class="crown">
<div class="container">
<img src="http://www.clker.com/cliparts/3/8/d/6/12205466202120645650portablejim_Chess_tile_-_King_1.svg.med.png" height="250" width="200">
<h3><strong>Join today!</strong></h3>
<p style="text-align: center;"><a class="btn-two" href="#">Register</a></p>
</div>
</div>
<section class="footer">
<div class="container">
<p>© 2016</p>
</div>
</div>
</body>
</html>
And here's the CSS for it:
.btn-two {
border: 1px solid black;
padding: 20px;
text-decoration: none;
background-color: black;
color: white;
text-align: center;
margin: 20px 0 -30px 0;}
I've tried a lot of things in the CSS that aren't working. I want the button to be a few inches below the "Join today!" text but it stays where it's at, like a hair below the text when I want there to be space in between the text and the button. Any idea what I'm doing wrong? And again I'm new to all this so I appreciate your understanding. Thank you.
You have to add display:inline-block; or block to the .btn-two since anchor elements are display:inline by default and margin/padding can't affect em
Check the snippet below
.btn-two {
border: 1px solid black;
padding: 20px;
text-decoration: none;
background-color: black;
color: white;
text-align: center;
margin: 60px 0 0 0;
display: inline-block;
}
I am fairly new to web development so I apologize if this is a "newbie" question, I've looked on various sites and tried various things but am not able to move a button on my page to where I want it to go. Here's the code I have for it in HTML:
<div class="crown">
<div class="container">
<img src="http://www.clker.com/cliparts/3/8/d/6/12205466202120645650portablejim_Chess_tile_-_King_1.svg.med.png" height="250" width="200">
<h3><strong>Join today!</strong></h3>
<p style="text-align: center;"><a class="btn-two" href="#">Register</a>
</p>
</div>
</div>
<section class="footer">
<div class="container">
<p>© 2016</p>
</div>
</div>
You can also remove text-align:center; style from the <p> that contains the button.
Working fiddle: https://jsfiddle.net/L210zqvf/
Apply display: inline-block; to your .btn-two. An <a> tag is an inline element, generally not accepting width, height, margins etc. as long you don't do the above.
Yeah, and if you don't want it to be centered, remove style="text-align: center;" from your <p> Tag.
Anchor a elements are display:inline by default in a browser. Inline level elements can't have margin or padding, top or bottom. You can only apply margin and padding to the left or right of an element.
In your case. I'd put a class on the containing paragraph element and add margin to the top of that. Paragraph elements are block level elements.
I'm in the process of creating a website, and am trying to align text beside an image. It sounds easy, but for some reason, I just can't seem to get it.
Here is an image of how I'm trying to get the images and text to appear:
So far I've tried the following HTML:
<div class="example">
<div class="eg1">
<img src="eg1.gif" />
<h2>Example 1</h2>
<p>This is an example</p>
</div>
<div class="eg2">
<img src="eg2.gif" />
<h2>Example 2</h2>
<p>This is another example</p>
</div>
</div>
and CSS:
.example {
display: inline-block;
}
.eg1, .eg2 > img {
float: left;
}
.eg1, .eg2 > h2 {
float: left;
}
.eg1, .eg2 > p {
float: left;
}
At the moment is appears all messed up. They appear underneath each other, and the text appears on the wrong side of the image.
What is the best way to achieve this?
may be like this?
<div class="block">
<figure><img src="http://lorempixel.com/100/100/" alt=""></figure>
<h1 class="title">the title here</h1>
<p class="excerpt">the text goes here</p>
</div>
<div class="block">
<figure><img src="http://lorempixel.com/100/100/" alt=""></figure>
<h1 class="title">the title here</h1>
<p class="excerpt">the text goes here</p>
</div>
http://jsfiddle.net/g57bB/7/
I recently set up navigation on a site like that. The key is in setting the image as the background and offsetting it with the center left no-repeat Though it was in a ul and a li format, I used the CSS in this format:
CSS
li a {
font-size:20px;
color:#f6f9db;
padding-left:75px;
background:url(icon-up.png) center left no-repeat;
text-decoration:none;
line-height:30px;
text-shadow: -2px 2px 1px #551508;
}
li a:hover {
color:#551508;
display:inline-block;
padding-left:75px;
background:url(icon.png) center left no-repeat;
text-shadow: -1px 1px 0px #f6f9db;
}
I'm trying to create a line of text followed by an image on the same line of a grid with 12 columns.
For some reason image 2 is displaying in line with image 1 text and then image 2 is showing with image 1 text.
It looks like the text and image elements within the div are above/below each other. What I want is them to be side by side.
How do I resolve this? I've posed the code here
http://jsfiddle.net/Dano007/P7nzy/embedded/result/
http://jsfiddle.net/Dano007/P7nzy/
HTML
<div class="grid_6">
<p class="text">"The best selection of cheese I've ever seen! Cannot wait for our next order!"</p>
<p class="image omega"><img src="img/cheese1.jpg" alt="Contact us"></p>
</div>
<div class="grid_5">
<p class="image"><img src="img/cheese2.jpg" alt="Contact us"></p>
<p class="text omega" id="text_left">"Wow, amazing cheese selection and very fast delivery!"</p>
</div>
CSS
.text {
display:inline-block;
font-size: 3.0em;
text-align: right;
}
#text_left {text-align: left; }
.image {
display:inline-block;
text-align: center;
border:solid 4px #6b5221;
}
You can try adding a width to your text content like shown below.
.text {
display:inline-block;
font-size: 3em;
text-align: right;
width: 80%; /* added this */
}
Demo Fiddle
You can use it the way Ollie has mentioned in his answer also. It depends on how you want the appearance to be.
Like this fiddle: http://jsfiddle.net/Hive7/P7nzy/2/
What you needed to do was set the display of the text elements to inline like this:
display: inline;
Also add:
white-space: nowrap;
How about:
CSS:
div.newSection {
overflow: hidden;
}
div.floatLeft {
float: left;
margin-right: 10px;
}
img { height: 50px; }
HTML:
<body>
<div class="newSection">
<div class="floatLeft">
<img src="img/cheese1.jpg" alt="Contact us" />
</div>
<div class="floatLeft">"The best selection of cheese I've ever seen! Cannot wait for our next order!"</div>
</div>
<div class="newSection">
<div class="floatLeft">
<img src="img/cheese2.jpg" alt="Contact us" />
</div>
<div class="floatLeft">"Wow, amazing cheese selection and very fast delivery!"</div>
</div>
</body>
JSFiddle: http://jsfiddle.net/markwylde/P7nzy/6/
I am new to css . I am trying to display my images in a perfect manner
here is my html code:
<div id="photos">
<h3>Photo title</h3>
<P class="like">Like </P>
<p class="date">date </p>
<div id="image">
<img src="something.jpg" />
</div>
<p class="about">about image goes here</p>
</div>
Now i want to style the same like this:
http://www.desolve.org/
If you want to make your image like that wall post i did it in below given fiddle link.
http://jsfiddle.net/zWS7c/1/
Css
#photos{
margin:10px;
border:solid 1px red;
font-family:arial;
font-size:12px;
}
#photos h3{
font-size:18px;
}
.date, .like{
text-align:right;
}
.about{
margin:10px;
}
#image img{
width:100%;
}
HTML
<div id="photos">
<h3>Photo title</h3>
<P class="like">Like </P>
<p class="date">date </p>
<div id="image">
<img src="http://www.desolve.org/_images/chicago_banner.jpg" />
</div>
<p class="about">about image goes here</p>
</div>
Live demo http://jsfiddle.net/46ESp/
and now set to according to your layout as like margin *padding* with or height
I think you need like this
http://jsfiddle.net/VwPna/
From http://www.w3schools.com/css/default.asp you learn easily... and also you can check other website css from firebug in your browser.
below code is that you given site css for banner class.
.banner {
background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
height: 350px;
margin-bottom: 4em;
overflow: hidden;
padding-left: 3.9%;
position: relative;
}
same way you can give more style their.
Here is the way it is made on the link you gave.
HTML:
<div class="banner">
<h1>We love urban photography</h1>
<p>
We’re betting you do to. Welcome to our site, a growing collection of galleries taken by a small group of passionate urban photographers. Visit our galleries, buy some of our prints, or drop us a line. While you’re at it, feel free to submit a gallery of your own.
<strong>Welcome</strong>
.
</p>
</div>
CSS:
.banner {
background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
height: 350px;
margin-bottom: 4em;
overflow: hidden;
padding-left: 3.9%;
position: relative;
}
.banner h1 {
color: #FFFFFF;
font-size: 2.2em;
letter-spacing: 0.1em;
padding-top: 290px;
}
.banner p {
background: none repeat scroll 0 0 rgba(123, 121, 143, 0.8);
color: #FFFFFF;
font-size: 1em;
height: 350px;
padding: 1% 1% 0;
position: absolute;
right: 0;
top: 0;
width: 21%;
}
You only need to translate that to your id's, classes and form, then you have it
There's nothing special that they've done on the reference web site. They've used the image as a background property of a div class="preview".
Here is the (x)HTML:
<section class="chicago">
<h2>Chicago</h2>
<p class="pubdate">
<time datetime="2011-04-24" pubdate="">April 2011</time>
</p>
<div class="preview"></div>
<p class="caption">Big wind, big shoulders. See a different side of Chicago.</p>
</section>
And the corresponding CSS
.chicago .preview {
background: url(../_images/sm_chicago_banner.jpg) no-repeat;
}
You can always sneak-peek by right mouse click on the website and choosing "View Page Source" or something similar, depending on your browser :)