I'm working on a template for a product.
The basic idea is to have the product number completely to the right, have the picture completely to the left, and have the description box touch the bottom of the product number from the top and touch the rightmost extent of the picture to its left.
The number and picture are in the right place. The product description however is not where I intend it to be.
Here is a picture of it:
and here is the html:
<div id="product">
<div class="productNumber">#425</div>
<div id="cont">
<div class="productPictureA">
<img src="images/mahogFront.png" alt="some_text"/>
</div>
<div class="productDesc">Product descriptionProduct
descriptionProduct descriptionProduct description
</div>
</div>
</div>
And these are the styles:
#product {
background-color: #42533E;
width: 650px;
}
.productNumber {
padding: 4px;
font-size: 35px;
color: #FF0000;
float: right;
}
.productPictureA
{
float: left;
padding: 0px;
margin: 10px;
}
.productDesc{
background-color: #00FFFF;
color: #FFFF00;
font-size: x-large;
}
What exactly do I need to do to acheive the aforementioned result?
Thanks
From what I understand of your question, you would have to set a width for the image(.productPictureA), and a width for your description(.productDesc), and float .productDesc left. To get it offset from the top you would just need to add a margin-top to it.
So, would this fit your question? It uses clear: right; on the text to move down below the product number, regardless of the height of that, and it already will be right next to the image.
Related
I have two minor issues that are driving me nuts.
1) If you visit my site, Stork,you can see that the 3 steps showing how it works and the 3 questions at the footer are aligned to the left. I want them to be centered on the page but I must have missed something because margin: auto; isnt working.
Can you please help me center them?
Here is the HTML & CSS for the Steps:
<div class="panel">
<div class="title">Step 1: Schedule</div>
<div class="steps">
<p>Schedule a pick up and dropoff with our easy form and let us take care of the rest.</p>
</div>
</div>
.panel {
display: inline-table;
margin: 0 auto;
padding: 50px;
width:200px;
height: 180px;
line-height: 1.5;
}
And for the questions:
<div class="cbox">
<div class="ctitle">How Can I Pay?</div>
<div class="cblurb">
<p>Full payments can be made upon delivery using credit cards only.</p>
</div>
</div>
.cbox {
display: inline-table;
margin: 50px auto;
padding: 50px;
width:200px;
height: 100px;
line-height: 1.5;
color: #424242;
margin-top:60px;
}
2) On a minor note, I am trying to connect the words in the navbar with their respected div classes using the format href="/.contact", but i keep getting an error. how do i fix that?
Thank you!
Add text-align: center; to the panel's parent div, that should center your "inline" elements.
If you don't want the contents of the panel to be aligned that way (they will inherit the alignment), add text-align: left to the panel's styling.
Update
Regarding the second part of your question - you cannot link to an element just using its class (not without javascript, and deciding which element from the collection returned is the one you want as classes are not unique).
An id, however, is unique and can be linked to with Link
Here's my situation: I have a changing image of various sizes (always different) being brought into an area of our splash. I posted a question about this a few days ago and employed the solutions that someone suggested. However, there were other issues that I also had to deal with I am back with an updated page that fixes other problems but I now need to see how to vertically center an image within this new code
First, here's the page: http://americanart.si.edu/index_newsplash3m.cfm
It's the middle image for our blog under the slider. Here's the code and css:
Code:
<div class="middle">
<div class="middleimage">
<img src="http://americanart.si.edu/eyelevel/images/luce_eyes.jpg" id="middleimg" alt="Blog: Eye Level Image" /><br />
</div>
<div id="middletext">
<p>
<i>The Dying Tecumseh</i> by Ferdinand Pettrich has returned to the second floor galleries at American Art after his extended stay with the National Portrait Gallery for the exhibition, <i>1812: A Nation Emerges</i>. Visit his new spot among the ...
</i>
<span class="red">Read more...</span> </p>
</div>
</div>
And here is the CSS:
.middle {
float: left;
width: 30.5%;
margin-right: 2.1%;
margin-bottom: 2% ;
background-color: #fff;
min-height: 100%;
background: url(/#res/img/americanart_blog_test.jpg) no-repeat #fff;
padding-top: 31px;
text-align: center;
position: relative;
}
div.middleimage { height: 207px;
}
div#middletext {margin-right: 2.1%;
margin-bottom: 2% ;
background-color: #fff;
min-height: 100%;
}
div.middle img#middleimg { max-height: 207px;
max-width: 291px;
bottom:0;
left:0;
right:0;
margin:auto;
vertical-align: middle;
position: relative;
}
I had to create some new nested divs around the image and text in order to keep the text from going into the image area when the image was of small height.
Thanks.
For div.middleimage add this css rule:
display:table;
Then wrap a div around your actual img tag like this:
<div id="imagewrap"><img src="http://americanart.si.edu/eyelevel/images/luce_eyes.jpg" id="middleimg" alt="Blog: Eye Level Image"></div>
And add this rule to your css:
#imagewrap {
display:table-cell;
vertical-align:middle;
}
You can also do this without any tables, simply add line-height: 207px; to your middleimage class and that should center the image inside.
div.middleimage {
line-height: 207px;
}
Centering things vertically in CSS is next to impossible, as far as I know. There's an article I've been meaning to read that may help you: http://designshack.net/articles/css/how-to-center-anything-with-css/
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/
I'm currently working on a heading in joomla with background formed from 5 parts of images. Should look like this (just an ASCII example)
{=<Text>=--------}
which is split into
Left ({=<)
Title (Background for the text)
Title-Right (>=-)
Middle (-)
Right (-})
Hope you guys can visualize this. Now, Title and Middle need to be repeated x, but I want Title to size according to the text, supposedly background for the text's div. I can't seems to get the right combination of div and css to do it correctly. Right now I wrap div in div for each part until the text. After the text, they just goes to the next line. display: inline can't help much also. Guess I'm not so good with CSS after all.
Thanks in advance.
NOTE: I can't attach print screen as the images are copyrighted.
EDIT: the Middle part has to expand so that the Right part hits the end, basically occupying the whole width.
|<-----------------------------Full Width of DIV------------------------------->|
{=<Short Text>=------------------------------------------------------------------}
{=<Much Longer Text>=------------------------------------------------------------}
{=<Much Much Much Longer Text>=--------------------------------------------------}
Thanks to Bazzz, I've found a way to do it.
Since Middle when set to width: 100% will reach the right end, so the only way to pull back a little is by using a shorter wrapper. Then place the "Right" part after the wrapper.
HTML
<div id="Header">
<div id="Wrapper">
<span id="Left"> </span>
<h1 id="Title">Title text</h1>
<span id="Title-Right"> </span>
<span id="Mid"> </span>
</div>
<span id="Right"> </span>
</div>
CSS
#Header span, #Header h1 {
display: inline-block;
white-space:nowrap;
overflow: hidden;
width: 570px;
}
#Wrapper span, #Header h1 {
display: inline-block;
white-space:nowrap;//Don't wrap into 2nd line
overflow: hidden;//This help with the 100% width setting
width: 550px;//Header width - "Right" width
}
#Left {
width: 20px;
background: blue;
}
#Title {
background: yellow;
}
#Title-Right {
width: 20px;
background: grey;
#Mid {
width: 100%; //Maximize this
background: green;
}
#Right {
width: 20px;
background: red;
}
Here is my attempt to create what you asked for, see if it matches your requirement:
http://jsfiddle.net/47Aej/
You obviously can replace the background: blue;, background:red; etc. with your images. also feel free to change the "Title text" to see that the yellow part will size according to the text (it is the same h1 in the end).
HTML
<div id="Header">
<span id="Left"> </span><h1 id="Title">Title text</h1><span id="Mid"> </span><span id="Right"> </span>
</div>
CSS
#Header span, #Header h1 {
display: inline-block;
}
#Left {
width: 20px;
background: blue;
}
#Title {
background: yellow;
}
#Mid {
width: 60px;
background: green;
}
#Right {
width: 20px;
background: red;
}
I'm trying to build a profile page for a network...similar to Facebook profile page. I need the background the tabs are on to go under the profile photo on the left...so when the user updates their status it grows vertically underneath the photo..take a look at Facebook profile page. I've tried placing the status at the top "topStatus" with position: absolute; top: -51px; on the left column "profile_leftside" which works but when more apps are added to the left side it displays past the bottom border..doesn't stay contained in "pageContent".
Basically here's my layout...
<div id="pageContent">
<div id="topStatus">
<div id="innerStatus">
*STATUS AND TABS HERE // EXPANDS VERTICALLY WHEN STATUS IS UPDATED*
</div>
</div>
<div id="profileContent">
<div id="profile_leftside">
*LEFT SIDE APPS*
</div>
<div id="profile_rightside">
*TAB CONTENT*
</div>
</div>
</div>
CSS
#pageContent {
width: 799px;
min-height:600px;
text-align: left;
margin-left: auto;
margin-right: auto;
float:left;
border-left:1px solid #b3b3b3;
border-right:1px solid #b3b3b3;
border-bottom:1px solid #b3b3b3;
}
#topStatus {
background: #f7f7f7;
border-bottom:1px solid #DDDDDD;
width: 100%;
}
#innerStatus {
padding: 10px 10px 0px 225px;
}
#profileContent {
padding: 8px 0px 8px 10px;
}
#profile_leftside {
float: left;
width: 200px;
position: absolute;
top: 51px;
}
#profile_rightside {
float: right;
width: 580px;
}
Just trying to get "profile_leftside" at the top left without breaking the content at the bottom. Maybe theres a better way to lay this out?
Thanks!
I've always found CSS frameworks to be very helpful. Many of them have been proven again and again, and it takes abstracts you up a layer above having to worry about specific CSS layout problems.
I've used Blueprint CSS for many things, but have also heard good things of the 960 Grid system.
Blueprint CSS: http://www.blueprintcss.org/
960 Grid System: http://960.gs/
Regards,
Chris
It's easier to add any CSS problems to JSFIDDLE.NET so other people can look at the problem directly. I've added it for you and come up with a solution that I think you were looking for: http://jsfiddle.net/SqxN7/12/
The top bar now expands with the left Apps. I had to reorganize the placement of the div's and add 'overflow: auto' to the top status bar to allow it to expand as the app bar is a float.