I have this div:
<div class="inauguration-image">
I do not want this text to display, just here for description
</div>
Here is the css for it:
.inauguration-image {
margin-top:5px;
margin-left:auto;
margin-right:auto;
background: url("/images/inauguration_block.png") no-repeat;
position:relative;
width:760px;
height:552px;
}
I do not want the text to display, how would I go about doing that?
.inauguration-image {
margin-top:5px;
margin-left:auto;
margin-right:auto;
background: url("/images/inauguration_block.png") no-repeat;
position:relative;
width:760px;
height:0;
padding-top:552px;
overflow:hidden;
}
Setting height:0 and overflow:hidden hides your text; padding-top:552px makes the element large enough to display your background image, anyway. This is a very portable solution.
<div class="inauguration-image">
<p style="display:none">
I do not want this text to display,
just here for description
</p>
</div>
I don't think you're supposed to have uncontained text inside a div.
It's not quite clear what you're trying to do. If you're just trying to comment the div, use an HTML comment.
<div class="inauguration-image">
<!-- I do not want this text to display,
just here for description -->
</div>
you could also use:
.inauguration-image{
....
text-indent:-9999px;
}
which just moves the text to the left of 9999px and well you don't have anything else to change in your current class
Using a font size of 0px will make the text invisible to the eye. For example:
.inauguration-image {
margin-top:5px;
margin-left:auto;
margin-right:auto;
background: url("/images/inauguration_block.png") no-repeat;
position:relative;
width:760px;
height:552px;
font-size: 0px /** Fontsize of 0 makes it invisible */
}
Related
I was asked to code an unusual shape background color on some centered text.
The text should be centered and it's background color should continue all the way right of the parent element.
Here is the desired output :
I have never seen anything like this so I don't even know where to start. Thank you for your help!
You can use a pseudo element to make the black background continue on the right :
DEMO
HTML :
<div>
<span>Some text with</span><br/>
<span>unusual background</span><br/>
<span>color</span>
</div>
CSS :
div{
float:right;
padding-right:150px;
text-align:center;
position:relative;
}
span{
display:inline-block;
background:#000;
color:#fff;
line-height:1.4em;
margin:0;
}
span:after{
content:'';
position:absolute;
width:200px;
height:1.4em;
right:0;
background:inherit;
z-index:-1;
}
I don't understand well your problem, but try to mix these concepts:
HTML:
<div id="parent">
<p id="son">Some text with unusual background color</p>
</div>
JS:
<script type="text/javascript">
document.getElementsById("parent").style.background="red";
document.getElementsById("son").style.background="blue";
</script>
try to change the son and the parent colors.
#one{
border:2px solid black;
border-radius:10px;
background-color:yellow;
padding-top:20px;
padding-left:20px;
padding-bottom:20px;
padding-right:20px;
height:180px;
width:62%;
margin:auto;
}
.im1{
height:180px;
width:200px;
}
<div id="one">
<img src="inspirational1.jpg" alt="picture1" class="im1"/>
<img src="inspirational2.jpg" alt="picture2" class="im1"/>
<img src="inspirational3.jpg" alt="picture3" class="im1"/>
<img src="inspirational4.jpg" alt="picture4" class="im1"/>
<img src="inspirational5.jpg" alt="picture5" class="im1"/>
</div>
The code above woks perfectly when I'm working im my desktop, but as soon as I open in my laptop all the images are all over the place. I would like to fit them in the div making sure they don't go everywhere if open the website in a new browser, or scree. Any advice is more than welcome please
http://jsfiddle.net/LYL2S/1/
#one{
border:2px solid black;
border-radius:10px;
background-color:yellow;
padding:20px;
margin:auto;
width:620px;
}
.im1{
height:180px;
width:200px;
}
If I understood right you can use float instruction for your images
in css add this line:
#one img { float:left; }
where #one is the the container div
or using class on the images:
im1 {float:left;}
and after your container add a div with class .clear where clear {clear:both;}
Since your saying just for css.. you can't do it dynamically like if the number of images change..
However with just css and a fixed amount of images, like the 5 you showed in your question, you can just use percentages instead , like this
.im1 {
width: 19%;
}
Because 100% width of parent / 5 images = 20% , but sometimes you want to set a little lower to make sure some browsers don't render it incorrectly, so they all fit on the same line.
Also, since your using an id #one for the parent, you might need to use
#one .im1 {
width: 19%;
}
instead
Background
I am creating a video gallery using the ShadowBox jQuery plugin. To do this, I am creating rows of inline images using display:inline-block. The user will be able to upload a video as well as thumbnail images to accompany the video. The thumbnail's max size is 240x160 pixels.
What I want to do is have a black border around each gallery thumbnail "slot" with the user's uploaded thumbnail residing inside of that "slot", so if the user uploads a 240x160 thumbnail, the thumbnail will fill up the "slot" completely, and if they upload a smaller image, the thumbnail will still be in the "slot" with some extra spacing around it.
Here's an example of where I am right now: http://jsfiddle.net/shaunp/HvZ5p/
The problem is that there is extra spacing below my thumbnails and I'm not sure why. If you inspect the code you will see that there is an extra 5 pixels lurking below the image and I'm not sure where it's coming from. The grey part below the image should be directly BEHIND the image so that in the case the user uploads a smaller thumbnail, there will be grey-background space around it, but for some reason it is too tall. Any suggestions?
HTML
<div class="inline">
<div class="bg-thumb">
<div class="cell-thumb">
<a href="#" rev="#nvcCaption#" class="shadow">
<img src="http://farm9.staticflickr.com/8330/8135703920_f2302b8415_m.jpg" class="thumbImg" alt="Thumb" />
</a>
</div>
</div>
<div class="vcCaption">Caption</div>
</div>
<div class="inline">
<div class="bg-thumb">
<div class="cell-thumb">
<a href="#" rev="#nvcCaption#" class="shadow">
<img src="http://farm9.staticflickr.com/8330/8135703920_f2302b8415_m.jpg" class="thumbImg" alt="Thumb" />
</a>
</div>
</div>
<div class="vcCaption">Caption</div>
</div>
CSS
body {
overflow:hidden;
margin:0 50px 0 50px;
}
.vcCaption {
text-align:center;
font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
color:#000;
margin-bottom:5px;
}
.inline {
display:inline-block;
}
.bg-thumb {
width:250px;
height:170px;
}
.bg-thumb {
text-align:center;
display:table;
margin-bottom:5px;
}
.cell-thumb {
display:table-cell;
vertical-align:middle;
border:5px solid #000;
background-color:#7f7f7f;
}
.thumbImg {
max-width:240px;
max-height:160px;
}
Add vertical-align:top to your thumbnails:
.thumbImg {
max-width:240px;
max-height:160px;
vertical-align:top;
}
jsFiddle example
The default value of vertical-align is baseline, but for your needs you'll want the images to align to the top.
Another option would be to set the font size to zero on the containing div like:
.cell-thumb {
display:table-cell;
vertical-align:middle;
border:5px solid #000;
background-color:#7f7f7f;
font-size:0;
}
jsFiddle example
Adding vertical-align: middle; to your image will solve that.
.thumbImg {
vertical-align: middle;
max-width:240px;
max-height:160px;
}
the anchor tag is by default an inline element which gives it extra spacing, set it to a block element and give it some width and height!
.cell-thumb a {
display: block;
width: 240px;
height: 160px;
}
Images will by default display as inline-block (http://dev.w3.org/html5/markup/img.html#img-display) meaning that they will sits on an inline level block - or text line if you prefer.
Either set the font-size and/or line-height to 0 or in this case simply set the image to display at block level (display: block;).
http://jsfiddle.net/AmKHx/
Hello all,
I linked my code on the top. My main problem is that I have my header, content and footer perfectly set that works with all websites. It does not have a scrolling feature or anything. Everytime I try to add the Intel Logo to the screen. It does what it is up there. I move it around and tweek it and then it works for one browser and not the other... It keeps changing. I want the logo to stick to the left perfectly along with the header I made with CSS. Also I want the Mobility Group Text at that height right next to the logo, but for some reason it always messes up my header content and footer as well when I paly with it. So pretty much I want The Logo on first then Mobility Group Right next to itand make it very smooth!
Also I have just learned html css and php and if you guys see something in my code that could be done smarter please let me know. I need critical feedback so that I can progress in learning these new languages better so that I can succeed in this field of programming!
Thank you in advance for all the input and advice!!
HTML CODE:
<div id="page">
<div id="header">
<h1><img src="http://wireless.fm.intel.com/test/logo2.png">
<h2>Mobility Group</h2>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
CSS CODE:
Html, body
{
Padding:0;
Margin:0;
Height:100%;
}
#page
{
Min-height:100%;
position:relative;
height:100%;
}
#header
{
background-color:#115EA2;
height:100px;
width:97.5;
}
#main
{
width:1300px;
margin-left:auto;
margin-right:auto;
background-color:#F1F2F3;
min-height:87%;
height:auto;
height:87%;
margin:0 auto -50px;
vertical-align:bottom;
}
#footer
{
Position:fixed;
Width:100%;
Bottom:0;
Height:50px;
background-color: #115EA2;
}
#header h1
{
position:absolute;
text-align:left;
left:0px;
top:0px;
}
#header h2
{
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
}
I'm still not sure I understood the question, but here's what can you do to make it more natural looking. Close the h1 tag, don't make it absolutely positioned, but rather make it float left. The same thing goes to the h2 element. And since the original image is missing, I've put another one, and fixed its height to 60px.
It's basically this:
#header h1 {
text-align:left;
left:0px;
top:0px;
float: left;
}
#header h1 img {
height: 60px;
}
#header h2 {
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
float:left;
}
See the results here: http://jsfiddle.net/AmKHx/1/ It should look the same in every modern browser.
Also, try not to use capital letters for CSS attributes - it's a standard to use lower case, and even some browsers might not like it.
Do you have a reset sheet?
Copy this to a new css file, call it reset.css and then load it in your page before you load your main css.
html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
legend{color:#000}
Here is my HTML:
<div id="leftMenuWrapper">
<div id="ramps" class="leftMenuHeaderButton"></div>
<div id="carServiceRamps" class="leftMenuSubButton"></div> <div class="clear"></div>
<div id="67RaceRampsXT" class="leftMenuProductButton"></div>
</div>
Here is my CSS:
#leftMenuWrapper{
background:url(../images/main_elements/leftMenu_BG.jpg) repeat-y;
border:#777777 thin solid;
width:160px;
margin-left:-19px;
position:absolute;
padding-bottom:5px;
}
.leftMenuHeaderButton{
width:175px;
height:35px;
position:relative;
top:-16px;
left:-11px;
}
#ramps{
background:url(../images/main_elements/leftMenu/Ramps.png) no-repeat;
}
.leftMenuSubButton{
width:169px;
height:21px;
position:relative;
float:right;
left:1px;
}
#carServiceRamps{
background:url(../images/main_elements/leftMenu/car-service-ramps.png) no-repeat;
}
.leftMenuProductButton{
width:160px;
height:20px;
clear:both
}
#67RaceRampsXT{
background:url(../images/main_elements/leftMenu/67-Race-Ramp-XTs.jpg) no-repeat;
width:160px;
height:20px;
}
.clear{clear:both}
Everything works, except <div id="67RaceRampsXT" class="leftMenuProductButton"></div> won't display it's BG image (it won't even display a BG color). The element is there, because if I adjust the sizes, it adjusts accordingly, but it won't display images in FF or Chrome.
I can put an <IMG> in it no problem, and I can even assign a BG to .leftMenuProductButton but not to #67RaceRampsXT
I don't think ids can start with number. Try to change your id to something like RaceRamps67XT and test it that way - in both HTML and CSS and see what it does.
Pretty sure only class identifiers can start with a number. For IDs you want [A-Za-z_]. Try changing your ID to #sixtySevenRaceRampsXT. Check out this question on valid IDs for more information:
What are valid values for the id attribute in HTML?