I am wanting to, if possible, align a set of text (<p>TextHere</p>) relative to where a image is. I have an image centered horizontally on my page:
.headerlogo {
height: 60px;
width: 70px;
position: fixed;
z-index: 99;
margin-top: 5px;
left: 50%;
margin-left: -35px;
}
Now, I want some text to be 50px to the right/left of that... I thought there may be some sort of way to do so using something similar to margin-left but so far haven't come up with anything.
I know that I can put text a certain distance out from the left using margin-left: 600px; so that it looks good and next to the image, but as you all know, this will move on window resize.Any help would greatly be appreciated as I am still new at positioning...
as you didn't post the relavent code of your problem but still i try to display the text next to the image with margin-left:50px. and it will not gonna move on windows resize .
Here is the jsFiddle link http://jsfiddle.net/datechogeek/qU6Cb/
Keep the position:absolute for your text and add left,right position as per your need . It would be nice if you can post your complete HTML code.
Were you trying something like this?
HTML
<div class='wrapper'>
<p class='leftText'>Left text</p>
<img class='headerlogo' src='http://m.c.lnkd.licdn.com/media/p/2/000/19b/1b2/065601a.png' alt='your_image'/>
<p class='rightText'>Right text </p>
</div>
CSS
.wrapper{
position:relative;
height:60px;
width:280px;
margin:auto;
}
.headerlogo {
position:relative;
float:left;
height: 60px;
width: 70px;
margin-left:50px;
margin-right:50px;
}
.leftText, .rightText {
position:relative;
float:left
}
Fiddle Link
Related
I am trying to make a slider. How can I put one image into another image and
put text and a small image in that image(the last one)? I have put one image into another one with no problem by giving position:relative in for main div and giving the second image position:absolute. But the third part (putting small image and text in that image) is tricky. I gave the container of image and text position absolute, but it is positioned out of the image div. Maybe a small example could help. Thanks
#maincontainer{
width:650px;
margin:0 auto;
margin-top: 25px;
position: relative;
}
#image1container
{
width: 650px;
margin:0 auto;
margin-top: 25px;
position: absolute;
top: 95px;
left: 137px;
}
#image2container{
position:absolute;
}
You could try using the background-image CSS property of <div> elements in HTML. Your HTML would look like this:
<div id="maincontainer">
<div id="image1container">
<img src="small-image.jpg" alt="Small image />
<p>Text in image</p>
</div>
</div>
And your CSS would look like this:
#maincontainer {
background-image: url('main-container-image.jpg');
}
#image1container {
background-image: url('image1-container-image.jpg');
}
From here, you could use CSS to position the elements as needed.
I'm designing a pretty simply website for a friend. In the design, he wants a ribbon to stretch out horizontally in the middle of the page.
Like so:
https://i.imgur.com/Hz4SH4Hh.png
My attempt at doing this was to crop the 'ribbon' parts of the right and left and display those images while floating them to the right and left. Then creating a content div, centering it to fill in the middle of the ribbon. This solution is super sloppy and doesn't work well at all. Here's a picture of it
https://i.imgur.com/66C2kj5h.png
The resolution is kinda off, but you can see that the border of the middle div are off, and when stretching or shrinking the page, the percent width of the middle div messes the whole thing up.
Heres my HTML/CSS
<div class='ribbon-container'>
<div id='ribbon-left'>
</div>
<div id='ribbon-right'>
</div>
<div class='clear'></div>
<div id='ribbon-middle'>
</br>
<center>
<span class='ribbon_header'>Food Around Your School</span>
</center>
</div>
</div>
.ribbon-container { width:100%; height:118px; position:relative;}
#ribbon-left { background-image:url('images/ribbon_left.png'); width:117px; height:119px; position:absolute; bottom:0; left:0;}
#ribbon-right { background-image:url('images/ribbon_right.png'); width:117px; height:119px; position:absolute; bottom:0; right:0;}
#ribbon-middle { width:85%; height:81px; background-color:#b5b5b5; border:7px; border-top-style:solid; border-bottom-style:solid; border-color:#61615f;top:0; margin:0 auto;}
You're just gonna have to size everything in the same units. I'd suggest just using pixels unless you're going with a responsive design, and if you're going with a responsive design, I'd suggest using something like foundation.js.
Edit: and +1 to Michael Peterson's SVG idea. That's a good one too.
Perhaps try setting
.ribbon-middle{
width: auto;
padding: 0 120px;
}
where ribbon's padding is the width of the left/right images. then you will have the text always visible.
Since the height of the banner is not changing, you can accomplish this using by using a horizontally-repeating image as the background for the banner and then using absolute positioning for the left and right portions of the banner.
The html becomes:
<div class='ribbon-container'>
<div id='ribbon-left'></div>
<div id='ribbon-right'></div>
</div>
And the css becomes:
.ribbon-container {
width: 100%;
height: 120px;
position: relative;
background: url('http://i.imgur.com/LVXiQ37.jpg') top left repeat-x;
}
#ribbon-left {
position: absolute;
top: 0;
left: 0;
width: 112px;
height: 120px;
background: url('http://i.imgur.com/2MOcrO9.jpg') top left no-repeat;
}
#ribbon-right {
position: absolute;
top: 0;
right: 0;
width: 97px;
height: 120px;
background: url('http://i.imgur.com/Q6NmXR6.jpg') top left no-repeat;
}
I've done a really crude mock-up using the initial image you posted. The problem is that the image itself is not perfectly horizontal, so it looks like the right side does not line up in my fiddle, but if you are more careful in creating the initial image, this will work. And I haven't added text, but this can be done using absolute positioning as well, or another method I'm sure.
You can see the example at: http://jsfiddle.net/M3GmY/
Dear Friends I am so struggling on about a problem came to me in my web design.
My layout as follows,
<div class="main_div">
<div class="left_column">
<div class=="fixed_div"></div>
</div>
<div class="mid_column"></div>
<div class=="right_column"></div>
</div>
and css file look like
.main_div{
float:left;
width:80%;
}
.left_column{
float:left;
width:20%;
}
.mid_column{
float:left;
width:40%;
}
.right_column{
float:left;
width:20%;
}
What i wanted to do is i need to make the fixed_div fixed inside the parent element and give the width to 100%. But it always comes out of the left_column. How would i overcome this problem please help. Thanks
Please note that sometimes i am changing left_column's width from jquery.So at that time the fixed_div must also adjust as the left_column.
For block elements your issue is fixed by default cos they have width: auto;. Do not adjust #fixed_div width at all and it'll work.
P.S. Using IDs for selecting all elements in css - isn't a good style, better rework it to the classes.
You have floated all elements for this you must use clearfix technique to remove any error. And set .fixed_div to display: block; . If this do not help you please place a Demo. What actually you have been in problem.
This should help:
.fixed_div {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.left_column {
position: relative;
float:left;
width:20%;
}
I'm developing a website using drupal's (7.14) Marinelli theme as a template. I'm currently fighting with getting the main menu onto the same line as the logo. The url of my page is http://quaaoutlodge.com/drupal-7.14/ - can anybody help me on how I have to set the css properties or put the html together to get this aligned properly? The icon should be on the left side of the main menu and the yallow background is just for debugging reason.
Any help would be appreciated!
Thank you!
The code in page.tpl.php currently looks like this:
<div style="background:#000; height:85px; position:fixed; top:0px; width:100%; text-align: right;padding-right:-20px; filter:alpha(opacity=60);border-bottom:1px solid #999;">
<div style="text-align: left;
top:0px;
width:70%;
padding-left:100px;
padding-right:auto;
margin-left:auto;
margin-right:auto;
background-color:#FFFF00;"><?php if($logo):print $imagelogo;endif ?>
<div id="navigation-primary" class="sitemenu">
<?php print $mainmenu; ?>
</div></div>
The easiest solution would be to set position:absolute on both divs together with a top: and margin-left: property to always fix them relatively. You could also float them both left for instance, set a width property and a margin-left on the right div.
Here, this is what you'd need to do : http://jsfiddle.net/Z4EAb/
The main problem is that the second div (the one that wraps the logo & navigation) is too small to fit the logo and navigation comfortably.
First, please give that second div an id ("header-wrapper", for instance) and take out the style attribute. Then here's the relevant CSS:
#header-wrapper { width: 1038px; margin: 0 auto; }
#logo { top: 15px; position: relative; }
#navigation-primary { float: left; margin-left: 50px; padding-top: 34px; }
Don't be afraid of using negative margins to position things around each other.
See also:
http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
I have the following <div> inside a <body> tag:
<div id="AlertDiv"><h1>Yes</h1></div>
And these are their CSS classes:
#AlertDiv {
position:absolute;
height: 51px;
left: 365px;
top: 198px;
width: 62px;
background-color:black;
color:white;
}
#AlertDiv h1{
margin:auto;
vertical-align:middle;
}
How can I vertically and horizontally align an <h1> inside of a <div>?
AlertDiv will be bigger than <h1>.
You can add line-height:51px to #AlertDiv h1 if you know it's only ever going to be one line. Also add text-align:center to #AlertDiv.
#AlertDiv {
top:198px;
left:365px;
width:62px;
height:51px;
color:white;
position:absolute;
text-align:center;
background-color:black;
}
#AlertDiv h1 {
margin:auto;
line-height:51px;
vertical-align:middle;
}
The demo below also uses negative margins to keep the #AlertDiv centered on both axis, even when the window is resized.
Demo: jsfiddle.net/KaXY5
On the hX tag
width: 100px;
margin-left: auto;
margin-right: auto;
There is a new way using transforms. Apply this to the element to centre. It nudges down by half the container height and then 'corrects' by half the element height.
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
It works most of the time. I did have a problem where a div was in a div in a li. The list item had a height set and the outer divs made up 3 columns (Foundation). The 2nd and 3rd column divs contained images, and they centered just fine with this technique, however the heading in the first column needed a wrapping div with an explicit height set.
Now, does anyone know if the CSS people are working on a way to align stuff, like, easily? Seeing that its 2014 and even some of my friends are regularly using the internet, I wondered if anyone had considered that centering would be a useful styling feature yet. Just us then?
<div id="AlertDiv" style="width:600px;height:400px;border:SOLID 1px;">
<h1 style="width:100%;height:10%;text-align:center;position:relative;top:40%;">Yes</h1>
</div>
You can try the code here:
http://htmledit.squarefree.com/
Started a jsFiddle here.
It seems the horizontal alignment works with a text-align : center. Still trying to get the vertical align to work; might have to use absolute positioning and something like top: 50% or a pre-calculated padding from the top.
You could add padding to the h1:
#AlertDiv h1 {
padding:15px 18px;
}
You can use display: table-cell in order to render the div as a table cell and then use vertical-align like you would do in a normal table cell.
#AlertDiv {
display: table-cell;
vertical-align: middle;
text-align: center;
}
You can try it here:
http://jsfiddle.net/KaXY5/424/