I'm having this weird problem with this website I just started building. I want to get the header to align completely flush with the top of the page. But for some reason, there's a small space, about 20px high, that won't go away no matter what I try. I'm assuming there's just something about CSS and html that I'm not getting so can you guys help me out?
CSS:
#header {
background-color:#3429C9;
/*-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;*/
display:block;
position:relative;
z-index:2;
margin-top:-20px;
border-bottom:2px solid white;
margin-bottom:20px;
height:60px;
}
body {
text-align:center;
font-family: Georgia, Serif;
background: #000000;
margin:0;
height:100px;
display:block;
border:2px solid red;
}
Every browser (firefox,chrome,IE) have a default CSS it comes with which give default styling to elements. It also gives some default margin/padding, so usually when starting a web site design you should use a css reset file to reset all default styling.
That way you get the same basic behaviour for all browsers.
For a quick solution to yuor problem, just set the header padding/margin to 0.
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 am new to HTML/CSS and have been working on a website by editing an existing template with HTML 5 responsive features. My workflow consisted of checking back and forth between the code and the Chrome browser.
After I finished the website and was happy with the results, I checked to see how everything was displaying in Firefox and Safari.
To my shock, I suddenly saw that in Firefox the images on a couple of pages were sent completely out of alignment to the far right of the browser (so much so, that I would have to use the horizontal scroller to see the images fully). Throughout the whole development process I had no such problems with Chrome.
However, subsequently I have seen that there are also more slight image display errors for the website in Chrome and Safari on the iPad.
So far I have looked through the questions on this site and also run the w3 online html and css validators. None of these things have worked.
Below I have provided the html of one of the affected images and the relevant css below that.
<figure>
<img src="img/image.jpg" alt="Some text">
<figcaption>Some Text
</br>
(Photo credit: Daniel Easterman)
</figcaption>
</figure>
#main_article img
{
display: block;
border: 0;
max-width: 100%;
height: auto;
padding: 20px 0;
border-bottom: 1px solid #D6D0C1;
}
#main_article figcaption
{
line-height: 25px;
font-size:14px;
max-width:900px;
width:auto;
}
I hope someone can help me figure out why there is this discrepancy between chrome and firefox and what I can do to solve the problem so the images display nicely on both browsers. Thanks very much in advance!
I've looked at your code and can't find anything wrong. Even tested it on jsFiddle.
The problem you're having must have something to do with whatever styling you have for [body] or [container], etc.
basically, you might want to provide the bigger picture so we can help. Maybe share with us the entire style sheet, or whatever is relevant, perhaps the #main_article?
Another thing, is maybe firefox is not happy with custom elements and perhaps you should change figure and figcaption into classes instead (just a guess)
The full main article section is below. Also attached is a screenshot showing the problem in firefox.
#main_article
{
position:relative;
width:auto;
max-width:900px;
margin: 0 auto 20px auto;
}
#main_article h3
{
margin:35px 0 0 0;
font-size:25px;
border-bottom: 1px solid #D6D0C1;
padding: 20px 0;
margin-bottom: 20px;
width:auto;
float:left;
max-width:900px;
}
#main_article h4
{
line-height:25px;
width:auto;
float:left;
font-weight:900;
max-width:900px;
}
#main_article p
{
line-height:25px;
width:auto;
float:left;
font-weight:normal;
padding: 5px 0;
}
#main_article p a
{
text-decoration:none;
color:#00bfff;
}
#main_article p a:hover
{ text-decoration:underline;}
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%).
I don't know why this is happening.
I have this code here.
It works fine but "sometimes" (and many times in a row) for no apparent reason, this happens:
To all the .box class.
Sorry I have to share "all" my code but I have no idea why this is.
This is what it should look like:
I don't know if this is usual but id you want, you can download the two files from here (HTML and CSS + Images) because in jsfiddle seems to work all of the times,
I don't know whether it matters or not but I'm using chrome (latest) on a mac.
EDIT: I seems to work fine in safari every time.
Thanks in advance!! Please ask for any clarification needed!
By the way my title is absolutely horrible, sorry! but I have no idea what the problem is so I can't really describe it, feel free to edit or comment any suggestion.
On your style.css
Remove overflow:hidden on #container
Set overflow:hidden to the .box
Set float:left to the .box img
Set float:right to the .follow
new
#container {
height:100%;
width:520px;
position:relative;
left:50%;
margin:20px 0 0 -250px;
}
.box {
border:1px solid gray;
height:200px;
width:500px;
float:left;
margin:0px 0 20px 10px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
overflow:hidden;
}
.box img {
width:140px;
height:140px;
margin: 15px 0 0 15px;
float:left;
}
.follow {
/*outline:1px solid red;*/
height:80px;
width:260px;
float:right;
margin:25px 30px 0 0;
}
To make your css cleaner, when you state styles for .box:hover, you don't need to redeclare things that already apply to .box. All .box styles are inherited by .box:hover . (Example, how you have float:left on both).
That being said, this is almost certainly a float issue. Adjust both the float and clear properties of the two inner divs, the outer div, and the img to see if you learn anything from that. It's difficult to give help when the problem doesn't occur in the fiddle.
How to change the textbox size in html. Like the one in twitter.
Use CSS property font-size?
Twitter's default twitting box is using <textarea>. From Firebug, it's something like
textarea.twitterBox {
border:1px solid #AAAAAA;
padding:4px 2px;
-x-system-font:none;
font-family:'Lucida Grande',sans-serif;
font-size:1.15em;
height:2.5em;
line-height:1.1;
overflow:auto;
width:515px;
}
PS: Not sure if the theme affects the above though