Hello Gurus: I am trying something but just don't get the theory...I have one main Div and inside of it are: paragraph text and one image (both of these are nested inside their own Divs) (hopeful I did this correctly!)
For easy visualization.... they are both at the top of the html page and the Image is styled as float: right; the text can be styled but that's where I am hung-up.
----- I want to move the TEXT ONLY from its position; downward from the top of the page like 50px-----
When I styled the text with padding or margin, it takes everything; text and the image, and moves everything down Together....HOW can I leave the image where it is currently, and just move the text downward leaving white space at the top above the text and not the image?
Is this a positioning style? Or am I thinking about this all wrong? Thank you kindly for your help!!
html:
<div class="wrapper">
<div><img src="blah" class="img-right" /></div>
<div><p>some text</p></div>
</div>
css:
.wrapper div p {
position: absolute //can also be relative, depending on your needs
top: 50px
}
.img-right {
float: right
}
position can be relative or absolute depending on how you need your page styled.
See also:
http://www.w3schools.com/cssref/pr_class_position.asp
Related
I have a webpage that is displaying an image and another section of text entitled "About Me" with some paragraphs underneath. Currently, the image is on the left and all the text is on the right (I want this). What I can't figure out, is how to align both the image and the text section (both the h3 and paragraphs) an equal distance from both the top of the screen and bottom of the screen. I would like the top of the image to align with the top of the h3 in the middle of the screen, with the paragraph sections sitting under the h3 on their corresponding side.
HTML:
<div id="wrapper">
<section id="homepage_section">
<img src="img/1935323_10153090821883239_4407778661294134622_n.jpg" class="profile-photo">
<h3>About Me</h3>
<p>
Some text here.
</p>
<p>
Further text.
</p>
</section>
<footer>
<p>
© 2016 Name
</p>
</footer>
</div>
CSS:
.profile-photo {
display: block;
max-width: 350px;
border-radius: 100%; /* adds rounded corners to an element */
}
#wrapper #homepage_section .profile-photo {
margin-top: 50px;
}
I generally want to avoid doing something like I have here, where I am simply just pushing the element down the page with margin-top. I'd rather have something that allows the element to automatically sit between the top and bottom of page. I'm also a little confused why the margin-top style element works in the second CSS section, but doesn't work when I put it in the .profile-photo section (which seem to be the same thing to me), but I suppose that is a little bit of a different issue.
I need to place the first div over the below div.First div contains a png image and second div contains a background texture.
The problem is the second div is in footer and that is common for other pages also.And that was in seperate php file and was included. So I can't able to edit the second div.
How can I achieve this by only styling the first div?
<div style="">
<img src="sample.png">
</div>
<div style="background-image: url('bg.jpg');">
</div>
below div is in another php file.
If you want to overlap two html element then you have to use position absolute in css you can write css something like this
.firstdiv
{
position :absolute;
top: 20px; /* as per your design you can change it */
}
I have created a div class container but when I type in the text it appears in the middle of the container. How can I align the text to the top left corner of the container?
By the way I have used position: relative, top 0px left 0px.
However, this moves it to the the corner of the browser page, not the corner of the container.
There are many ways the text gets align into the center , you might have used the tag , or your container is forcefully moved in the center , the proper way of moving container to the middle is margin:0 auto; . You must give the html and css code your are using .
You might have used a text-align: center; can't really tell since you have not provided us with the necessary information to help you.
If it is a submit button in a form, and you inputted the text in the value="" it will automaticly center your text, the same goes for the tag called button between the tags.
Please make a codepen press the pen button, and copy the related code, and give us the link to your pen.
When you are using position absolute in your box, you need something to put it in relative to. So add a position relative to your box, and a position absolute to your text.
However I would suggest you to use line-height: "height of your box"px; and padding-left: 5px for an example to align your text in the box, if it is a button. Remember to use box-sizing: border-box; that allows you to use padding without expanding the box.
the align of the text can be changed using
margin-left:-1%;
margin-top:-1%;
float: left;
<div class="container text-center"> </div>
I am very new to html and css. I am trying to build my first website. I would like to have a picture on the same line as a nav bar, with the picture to the left. I first tried using some prewritten code for a drop down nav bar, but I was unable to position an image to the left of it. I tried some very basic code, but I still cannot figure our how to put a div (my image) next to a nav. I don't quite know when to use position and when to use float. My goal is simple to start. Get a div and nav to sit side-by side. Here is the html I am using to test:
<!DOCTYPE html>
<html>
<head>
<title>
Nav and div
</title>
<link rel="stylesheet" type="text/css" href="styleside.css">
</head>
<body>
<div>
<img src="images/basil.jpg" alt="picture here" height="20%" width="20%">
</div>
<nav>
<ul>
<li>Home</li>
<li>Big Friendly Button</li>
<li>TARDIS</li>
</ul>
</nav>
</body>
</html>
Can Anyone point me to a starting place for how to move these elements around? Thank you!
<sytle> // Put this in css
.anynames{ // this css is for position an image to the left
position:relative;
float:left;
}
</sytle>
<div id="anynames"> //<---- Id this use to indicate specific DIV
<img src="images/basil.jpg" alt="picture here" height="20%" width="20%" />
</div>
If this is correct Mark it if this is not We Finds ways :D
There are two common methods of forcing two block (commonly div) elements to sit beside each other.
Floats
Floats are used to force elements to strictly align along the left or right of a page. However, they are also useful for placing two block elements beside one another:
div.image {
float: left;
}
nav {
float: left;
}
See this Fiddle
One key advantage floating elements over inline blocks is that floating elements don't have a default margin to space text (see Inline blocks section).
You can also change the code under nav to float: right; which will separate the image and nav on separate sides of the screen.
Inline blocks
Inline blocks are often used to display block elements inside a paragraph. But since two inline elements are placed beside each other given enough room, we can use these to position blocks horizontally:
div.image {
display: inline-block;
}
nav {
display: inline-block;
}
And the Fiddle.
In the Fiddle I've colored the nav red to show the space in between the two elements. If you did the same for the floating elements, you'll see no space between the image and the nav. However, here there is a small margin caused by the default spacing given to inline-block elements - the browser wants to put space between an inline element and the surrounding text. To get rid of the space, you must add
body {
font-size: 0;
}
nav {
font-size: 12pt;
}
Why would you want no spacing? We often want widths described in percentages. However, if you were to keep the spacing while specifying percentages that add up to 100%, the second element would spill over onto the next line because we didn't take the extra spacing into account: see this Fiddle.
Your two elements div and nav need to be formated in CSS. Like this:
<style>
.myDiv{
display:inline-block;
width:50%;
}
nav{
display:inline-block;
width:50%;
}
</style>
You must enter in a class for div to understand this code
<div class="myDiv">
The code inline-block will allow elements that are smaller then the remaining width of the page to be stacked beside it.
Hope this helps!
How can I align a floating image on the right-bottom corner of my text? I have a div which has a background colore and contains a text. I want to see an image in that div tag, in the right-bottom corner. Any CSS solution??
<div id="myText">
A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here
<img id ="info_ico" src="images/key_ico.png" />
<div>
#myText
{
background:#fdf6cc;
min-height: 90px;
margin-left:1px;
width: 913 px;
padding-left: 30px;
}
#info_ico
{
float:right;
clear:right;
}
Now what to change to see the image in the bottom of the text?
If the length of the content is not going to change you can always place the image just before the end of the text, keep it floated right as you're doing and the last bit of text will flow down the left hand side.
Example here: http://jsfiddle.net/pBDaJ/
CSS unfortunately does not provide a way to do this.
The only thing you can do is to experimentally change where you insert the img inside your text, until it ends up where you want it to be: http://jsfiddle.net/KQFBb/1/
This is obviously not viable if the content is dynamic, or the dimensions of the container can otherwise change.
In that case, the only option left is to use JavaScript.
Using background you should be able to do this.
Add to your myText div styling:
background: url('images/key_ico.png') no-repeat;
background-position: 100% 100%;
This will place the picture in the bottom right corner of the div.
Hope this helps :-)
You can use the ::before pseudo-element to add a specific amount of height above the floated image. Just float the pseudo-element to the right and give it some height; then float the image to the right, clearing the pseudo-element.
.wrapper::before {
content: '';
float: right;
height: 300px; /* Height of the container minus the height of the image */
}
.wrapper img {
float: right;
clear: right;
}
If you don't know the height of the content, some light JavaScript is necessary. See http://jsfiddle.net/3jvJh/ for a working example.