I don't know how to call it exactly, these are the example i am working on.
Is is possible to make all of this using html and css on the sqaure and triangle part
or it is better just to use images
Yes it possible to make it using pure css but
it shows different result for different browser. i Better suggest you to take help of css and image.
<div class="firstDiv">
<div class="secondDiv"></div>
<div class="arrowDiv"></div>
</div>
apply following css
.firstDiv { float:left; height:25px; width:200px;}
.secondDiv{ float:left; height:25px; width:170px; background:#666; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:25px; color:#FFF;}
.arrowDiv { float:left; height:25px; width:25px; background:url(images/arrow.png) left no-repeat;}
Related
I am creating a web page that needs to be responsive.
Here is an image of it:
Here is the HTML:
<div class="smallBoxes">
<div class="leftHomeBox">
<a class="Description" id="Desc_1">WHEN?</a>
</div>
</div>
and the CSS:
.smallBoxes{
display:block;
margin-left:25%;
margin-right:20%;
width:auto;
}
.leftHomeBox{
width:100%;
float:left;
margin-bottom:10px;
padding:10px;
padding-bottom:0;
height:65px;
}
.Description{
border:5px solid #ffffff;
padding:5px;
}
I am trying to keep the "when" box in the centre of the div, for all screen sizes. AS things are now, both margins will change, but at different rates eg they do not stay consistent relative to each other and so the "when" box doe s not stay central.
I have looked at other websites and have not been able to find a working example.
I have tried using
margin-left:20%;
margin-right:20%;
width:auto;
but this does not work. I have been working on this all day and I have read all I can find but I cannot seem to get this to work. I have tried every possible thing I can think of.
Surely this is something that is required often and cannot be very difficult to achieve, but I am not able to find a clear answer to how to achieve this, or what I am doing wrong.
If someone could provide a fiddle of a working solution I would be very grateful.
use
CSS
.leftHomeBox{
text-align:center
}
DEMO
.Description
{
display:block;
margin-left:auto;
margin-right:auto;
}
This should be work.
You can apply a text-align: center on an <a> tag.
.leftHomeBox{
text-align:center
}
It will center the link without using margins
I'm having issues with making text inside of div tags be the size that I request it to be (in pixels). Say I want the font-size to be 20px, but I want the div size to be 250 by 50 pixels. However, the text seems to take the size of the div and becomes stretched out. Here is the code I am using:
.NavBarHome {
font-family:"Helvetica Neue";
font-size:20px;
text-align:center;
width:250px;
height:50px;
text-height:20px;
display:inline-block;
background-color:#161616;
color:#fff;
line-height:50px;
}
What can I do to make the text the size I want? I've used this script numerous times before and it worked just fine, but for some reason it just doesn't work this time. Any advice?
Try adding a max-width:250px to your CSS:
.NavBarHome {
font-family:"Helvetica Neue";
font-size:20px;
text-align:center;
width:250px;
max-width:250px;
height:50px;
display:inline-block;
background-color:#161616;
color:#fff;
line-height:50px;
}
<div>
<div></div>
<div class="NavBarHome">Home</div>
</div>
Right now my code for my screen looks perfect, but for some reason everytime I change to browser size from full screen to a smaller window all my nav bar moves underneath eachother under the header div and other things as well. If I was to add things in the footer as well how can I set it up so that the page stays the same no matter how you resize it. I don't mind if its fixed on only a full screen mode.
Another issue is that when I asked a friend to check the websites on his laptop it was all messed up because of screen resolution I think, but when I saw it on my monitor it looked completely fine. So I am confused and have no idea how to fix this issue. I have researched as much as I can, but everything I tried didn't work.
So all I am trying to do is make sure that the website is fixed and is only viewable in full screen. If I resize it to smaller then you can't see parts of the page and that's all.
If you could please help me that would be great!
http://jsfiddle.net/thNRs/ ---------------->JSFIDDLE DEMO. You can see the problem right away using this.
HTML CODE:
<body>
<div id="page">
<div id="header">
<img src="http://wireless.fm.intel.com/test/logo2.png" border=0>
<h2><a href="http://moss.ger.ith.intel.com/sites/MWG-IS/Pages/Default.aspx" border=0>Mobility Group</a></h2>
<div id="navigation">
About
Reports
Documents
Checklists
License Tools
Presentations
Software Releases
</div>
</div>
<div id="main"></div>
<div id="footer">
<!--<h4>WNG Product Development Engineering (US)</h4>
Circuit
Contact Us-->
</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;
position:relative;
}
#main
{
width:1300px;
margin-left:auto;
margin-right:auto;
background-color:#F1F2F3;
min-height:90%;
height:auto;
height:89%;
margin:0 auto -50px;
vertical-align:bottom;
}
#footer
{
position:fixed;
width:100%;
bottom:0;
height:35px;
background-color: #115EA2;
}
#header img
{
float:left;
display:inline;
}
#header h2
{
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
font-family: Sans-serif;
float:left;
margin-top:20px;
margin-left:20px;
text-decoration:none;
}
#header h2, a, a:visited, a:hover, a:active
{
color: #FFFFFF;
text-decoration: none;
}
/*#footer h4
{
left:20px;
top:-10px;
position:relative;
text-align:left;
font-weight:bold;
font-family: Sans-serif;
float:left;
color:#fff;
margin-left:20px;
}
#footer a, a:visited, a:hover, a:active
{
color::#fff;
text-decoration:none;
position:relative;
left:1025px;
top:10px;
text-align:left;
font-weight:bold;
font-family:Sans-serif;
float:left;
margin-left:20px;
}*/
/* NAVIGATION BAR CODE */
#navigation
{
position:absolute;
top:60;
left:500;
right:0;
bottom:0;
width:60%;
height:24px;
background-color:#115EA2;
min-width:100px;
text-align:center;
padding:10px 20px;
}
#navigation a
{
font-size:20px;
font-weight:bold;
font-style:Sans-serif;
margin:10px 0;
height:18px;
padding:12px 10px;
color:#FFF;
text-decoration:none;
}
#navigation a:hover
{
background-color:#333;
}
A good solution to problems with the page shifting when the window resizes or when someone does a ctrl + mouse wheel up/down type of page zoom is to set sizes of things on the page using the em unit. For example:
height:12.5em;
not...
height:200px;
width:60%;
etc...
1em == 16px by default. If you change the font size to a new em I think it can mess things up so as long as you're not doing that you're fine.
Set all containers except for the outermost containers to a definite size and use em units as they are calculated based on the font size or something so when you zoom the page everything stays the same relative size and you don't get messes. When I say outermost container I am referring to the ones directly inside the main tags, body, header, etc... set those with:
margin:auto;
width:(desired)%;
because they are on the outside, they only change in reference to the edge of the display area so when you zoom in and out, the outer edge buffer of the page just collapses and the things in the center appear to shrink and enlarge from the center.
So get a calculator, and start converting things like width:1300px; to width:81.25em.
One last note. em units round to 3 decimal places. ie. 2px = .125em exactly but 1px =/= .0625em you would use .063em.
Something to this effect?
The biggest issue was that you didn't have a minimum width for your menu, so it would keep shrinking until it stacked on itself.
#navigation {
float:left;
width:60%;
height:24px;
min-width:1000px;
text-align:center;
padding:10px 20px;
}
Add fix width to the #navigation. It has percent value now, so its width will counted from the body's width (60%).
If the #navigation's width narrower than the elements' width sum, the elements will start to fall to the second row.
The #header's width is "97.5".
Without measurement type (px, percent or some else) it will be ignored by the browsers (it will be 100%).
<div class="wholediv">
<div class="rightdiv">
<strong>Your Company Name</strong><br />
Evergreen Terrace 742<br />
Kansas Missouri<br />
Phone: 432-653-3121<br />
sales#thetiecompany.com </div>
<div class="sitemap">
Home | Sitemap | Contact Us</div>
</div>
</div>
div div.wholediv
{
height:97px;
width:500px;
float:left;
background-color:#F0F0F0;
}
div div.sitemap
{
background-color:#F0F0F0;
position:relative;
float:right;
width:200px;
height:87px;
padding-right:10px;
padding-top:10px;
font: 0.7em Tahoma, sans-serif;
font-weight:bold;
}
div div.rightdiv
{
float:left;
position:static;
background-color:#F0F0F0;
width:200px;
height:87px;
padding-left:10px;
padding-top:10px;
font: 0.7em Tahoma, sans-serif;
}
IE displays like this.
Chrome displays like this.
You have a block-level element that has both a width and padding. That's at least one thing that's going to cause trouble in IE because of the different box-model.
More info about box models: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
edit after you added the images:
atleast position: static & position:relative shouldn't be needed here the way you're using them. You could start debugging by removing padding from the elements. Padding is probably the thing in IE that breaks the "sitemap"-row.
You're not including in the code the part that has the logo-image etc so can't comment on that part. I think you should read about the box-models and apply that. Also it the way position is used looks quite random, so you could study that a little bit. More info in about positioning in http://www.quirksmode.org/css/position.html
.classname {
background-image:url(../../images/classname.png);
background-color:transparent;
background-repeat:no-repeat;
text-align:center;
border:none;
height:50px;
width:160px;
font-size:12px;
font-family:Tahoma, Geneva, sans-serif;
color:#CCC;
}
<div class="classname">Text</div>
Why the Text is above of image? What should I add to make it normal? I can use padding-top, but then the bottom of image will have space too if you know what I mean.
Thanks.
I created this for you, I think that's how you want to make it.
Because the image is a background for the text.
If you're trying to make an image button with text fallback, do <img src="someurl" alt="sometext" />
What do you mean by above?