Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I'm almost embarrassed to ask help with this. It's not like I've never done this before - with the exact code I'm using now!
For the life of me, I can't understand why the content of a new page won't center in the browser window.
The HTML I have is this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link type="text/css" rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="mainContainer">
Main Content Goes Here
</div>
</body>
</html>
And this is the CSS:
body { background-color: #EDEDC7; }
#mainContainer {
width: 1000px;
margin: 0 auto; }
What's happening is the text is being positioned about 1/3 of the way from the left edge of whatever browser window I view the page in. I know the stylesheet is "being found" by the web page because the background color is working.
I've checked it in FF8, IE9, Chrome, Safari 5, the latest versions of Opera and Dragon - even FF, Safari and Chrome on Mac! Okay - a little obsessive, I know, but I'm stumped as to why it won't center. So what the heck am I missing here? (Probably some stupid little thing I'm forgetting, too...)
It is working, the problem is that your text is not centered. If you add text align center to it it will work the way you are expecting.
example:
#mainContainter{
width: 940px;
margin: 0 auto;
text-align: center;
}
If you want to center text inside that container you need to put it in a separate div, format the width of that div(where your text need to go) and center it..
In your example it is centering the div which has length 1000px so there is no problem in code..:)
if that did work you could always use:
.wrapper {
display: flex;
justify-content: center;
}
<div class="wrapper">
<h1>Hello</h1>
</div>
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I am beginning to code in HTML and CSS, and am using the FreeCodeCamp tutorials to help me. Along with my learning I am creating a simple webpage of my own as a project to work on.
Having learnt how to use fonts from the Internet in my webpage, I tried to change the font, colour and size of my header, but when I run the code, this doesn't show up on my webpage.
If it helps, I am using PyCharm for this (I'm not really sure what IDE to use- and I already use PyCharm so I though I'd continue with that).
<link href="https://fonts.googleapis.com/css?family=Lobster"
rel ="stylesheet" type="text/css">
<style> <!--Why doesn't this work?-->
h1 {
font-family: Lobster;
font-size: 50px:
color: red;
}
</style>
<body>
<h1> This is the h1 text which should be formatted.</h1>
your CSS comment is wrong /* CSS Comment */
<link href="https://fonts.googleapis.com/css?family=Lobster"
rel ="stylesheet" type="text/css">
<style> /* Why doesn't this work? */
h1 {
font-family: Lobster;
font-size: 50px;
color: red;
}
</style>
<body>
<h1> This is the h1 text which should be formatted.</h1>
</body>
https://jsfiddle.net/lalji1051/x0odt5qk/2/
There is an error in your css at this line: font-size: 50px: should be ; instead of : at the end of line.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I'm having difficulty pinpointing whats preventing the following link from working.
I chose a random link (w3schools) to test it before I linked it to what its meant for.
I thought the problem may have to do with the CSS.
ul {
font-family: 'Montserrat';
font-size: 15px;
color: #994f00;
}
#innerNav {
/*adding a relative or absolute here will break sticky*/
background-color: black;
color: white;
left: 0px;
overflow: hidden;
height: 1300px;
width: 150px;
z-index: -1;
white-space: nowrap;
list-style-type: none;
}
<!DOCTYPE html> <!-- HTML 5 -->
<html lang="en">
<body>
<div class= 'wrapper'>
<div id = 'innerNav'>
<li>
<ul>The Door</ul>
<ul>Mr Pointy</ul>
<ul>Block Rain</ul>
</li>
</div>
</div>
</body>
</html>
But even when I comment out the last line of the innerNav, the link still doesn't work (clicking it doesn't open anything).
Any ideas?
also my git files for this is:
Portfolio
The problem has nothing to do with the link and everything to do with the fact that you have the z-index of your #innerNav set to -1. So you are covering your navigation up with the .wrapper. So just remove the z-index from the innerNav completely or just set it to 1.
PS the markup for this is invalid as well you may want to look up the correct markup for an unordered list it should be as follows:
<ul>
<li></li>
<li></li>
</ul>
For some reason you have it backwards with <ul> nested inside of <li> it should be the other way around.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 5 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
With the example HTML / CSS below, I cannot work out why this doesnt display the expected results in any browser (hosted in Visual Studio), however works perfectly when done as a JSFiddle. I'm probably missing something pretty obvious, but can anyone point out what that might be?
HTML:
<body>
<div class="wrapper">
<div class="navbar">
<p>Random white text which should appear in a grey banner at the top of the page.</p>
</div>
</div>
</body>
CSS:
body {
width: 100%;
margin: 0;
}
.wrapper {
display: table;
width: 100%;
}
.navbar {
width: 100%;
height: 200px;
background-color: #292929;
color: #ffffff;
text-align: center;
vertical-align: middle;
display: table-cell;
}
EDIT: I have tried this in various different browsers, including Firefox, Direfox Dev Edition, Edge, and IE, all with the same results (just plan black text on white screen).
Make sure to link your css file to your html file.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
...
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I want to do something like this..
enter image description here
I need to do this vertical line and the bottom border for every input. anyone has an idea?
Here is a basic structure you can use. Now it is up to you to integrate this with the elements of your website...
However, please be aware that Stack Overflow is not an outsourcing website where you ask people to code for you. Try to find a solution yourself and come here if you need help.
#wrapper {
display: flex;
justify-content: center;
}
#wrapper > div > div {
height: 30px;
margin: 10px;
border-bottom: solid 1px gray;
}
#separator {
height: 90px;
border-left: solid 1px gray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<div id="wrapper">
<div>
<div>1: plcHolder</div>
<div>3: plcHolder</div>
</div>
<div id="separator"></div>
<div>
<div>2: plcHolder</div>
<div>4: plcHolder</div>
</div>
</div>
</body>
</html>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
I know that bootstrap 3 is not compatible with IE7. However, I need to make it workable for the form I am building. This is not responsive.. just need to work nicely with IE7 including the error messages...
As you can see by comparing it on IE7 and any other nice browsers like Chrome, the state and age fields are not aligned side by side as it should be. The 2nd tick box is not aligned to the right of the 1st tick box... and there is a black line over the enter details button. Any help please?
Even though IE7 has extra low share, it is something that the client wants. I love using Bootstrap and he doesnt want any responsiveness... and doesnt even want %/em etc.. wants fixed width. Hence the code has fixed width.
To answer another query from below, I was hoping bootstrap3 has some kind of css patch that makes it workable for IE7 or atleast direct me on how to fix the issues listed here. HOwever I did end up fixing them. So thanks guys.
Link is here
http://staging.serviceportal.com.au/service05/discovery_2014.do
I solved the issue as below
body .container {
width: 900px
}
body input {
height:20px !important;
}
/*.form-control{
behavior: url(http://localhost/On%20Going/Discovery/January2014/discovery/web/pie/PIE.htc);
}*/
body select {
height: 34px !important;
width: 120px !important;
}
.firstName, .lastName, .age{
margin-bottom:15px
}
.col-sm-6 {
width: 50%;
}
.tick1{
padding-left:0px;
width:160px !important
}
.discoveryButton, .discovertMandatoryText{
float:left !important
}
.discoveryButton{
width:154px !important
}
.discoveryButton #submit{
text-indent:-9999px;
display:block
}
.discovertMandatoryText{
width:139px !important
}
.col-sm-7.tick2.has-pretty-child{
padding-left:0px;
width:270px;
margin-left:150px;
margin-top:-70px;
}
.age-state .age{
width:118px;
}
.email{
margin-top:10px;
}
.stars{
margin-left:10px;
}
select.state{
margin-left:60px
}
.state .stars{
margin-left:35px !important
}
So what I basically did is to look in firebug in a nicer browser like Firefox and get the margin, padding and width needed. I just copied those into the IE7.css file. And it worked. Yeep it is not responsive in ie7. However, by doing what I did, I was able to make it look nicer in IE7. I guess if someone is using bootstrap3, then do look at the padding/margin/width where it is breaking in IE7. Then take those values and add in IE7 only css file. Hope it works and helps someone
If you absolutely have to have IE7 compatibility, use a conditional statement to target IE7 and add styles as needed to fix issues you have:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="your_css_dir/ie7.css" />
- OR -
include your IE7 specific css here...
<![endif]-->