The problem that i am facing is that text inside the a tag is not adjusting on a single line.
Here's my html.
<html>
<head>
<link rel="stylesheet" href="style5.css" type="text/css">
</head>
<body>
<div id="outer">
<ul>
<li class="current">Home</li>
<li>content</li>
<li>search</li>
<li>more</li>
</ul>
<div id="homepage">
Set as Homepage
</div>
<div id="clear">
</div>
</div>
<div id="wrapper">
<div id="pic">
<img src="logo.png">
<div id="content">
<p> Secure Search </p>
</div>
</div>
<div id="forms">
<form>
<input type="text" name="submit" size="70" style="font-size:20pt;"/>
</form>
<div id="pic_2">
<img src="powerd-by-google.png">
</div>
</div>
<div id="footer">
© 2012 - We Respect your Privacy - About AVG Secure Search
</div>
</div>
</body>
</html>
and here's my css.
body
{
margin: 0;
padding: 0;
background-color: white;
}
h1,h2,h3
{
margin: 0;
padding: 0;
}
p,ul,ol,li
{
margin: 0;
padding: 0;
}
#outer
{
background-color: rgb(67,68,71);
}
#outer ul
{
list-style: none;
margin-left: 5px;
border-left: 1px solid;
}
#outer li
{
float: left;
}
.current
{
background-color: rgb(56,63,137);
}
#outer a
{
width: 90px;
display: block;
text-transform: uppercase;
text-decoration: none;
text-align: center;
font-weight: bold;
color: white;
border-right: 1px solid;
padding: 5px;
}
#outer a:hover
{
color: black;
background-color: white;
}
#outer .current a:hover
{
color: white;
background-color: inherit;
}
#homepage a
{
float: right;
font-weight: none;
color: white;
background-color: rgb(67,68,71);
display: inline;
text-transform: lowercase;
border-right: none;
}
#homepage a:hover
{
color: white;
background-color: inherit;
}
#clear
{
clear: both;
}
#wrapper
{
width: 960px;
margin: 0 auto;
overflow: auto;
}
#pic
{
margin-top: 100px;
margin-left: 389px;
position: relative;
}
#content
{
position: absolute;
top: 60px;
left: 90px;
}
#forms
{
margin-top: 50px;
position: relative;
}
#pic_2
{
position: absolute;
top: 0px;
left: 867px;
}
#footer
{
width: 500px;
margin: 375px auto 0px;
}
#footer a
{
text-decoration: none;
}
now the problem is with the a tag in the homepage div, i have tried very hard but i have no idea why its text is not adjusting on a single line instead it seems to creep up on multiple lines.
Any suggestions in this matter would be really helpful.
thank you.
I'm assuming you're talking about the 'set as homepage' button.
If so, The issue is that your css is writing a fixed with to the element inherited from #outer a which is making that element 90px wide.
You can fix this by simply adding the css style width: inherit; to #homepage a
Example:
http://jsfiddle.net/2jByx/1/
You need to add width to the "set as homepage" element
#homepage a {
.....
width: 120px; //added width
}
Take a look at here, http://jsfiddle.net/VkmHr/
is that you looking for?
Related
This is my code for an auto showroom that's in development:
https://jsfiddle.net/zoh03cdv/
I have two problems.
First problem is getting images and text next to each other despite the fact I set contentbox1 to 2 columns:
* {
width: 890px;
}
a {
text-decoration: none;
}
header{
margin: 0; padding: 2em 5em 4em; color: #efefef;
overflow:hidden;
position: relative;
}
header::after{
content:"";
position:absolute;
top:0;
left:0;
height: 100%;
width:100%;
transform: skewY(-3deg);
background: red;
transform-origin: bottom left;
z-index: -1;
}
div.content {
font-family: sans-serif;
font-size: 16px;
width: 460px;
}
ul.vehicleinfo {
display: flex;
flex: 1 0 15%;
flex-grow: 3;
flex-wrap: wrap;
flex-basis: 100%;
width: 800px;
margin-left: 16px;
list-style: none;
margin: 3px;
justify-content: space-between;
}
ul.vehicleinfo li {
font-family: sans-serif;
font-size: 88%;
color: #333;
background-color: yellow;
margin-bottom: 10px;
width: 400px;
margin-right: 40px;
margin: 0 0 40px 0;
justify-content: flex-end;
}
ul.vehicleinfo li * {
display: block;
}
ul.vehicleinfo li h3 {
font-size: 1.2em;
}
div.autocontent {
width: 760px;
margin-left: 70px;
}
.price {
width: 550px;
text-align: center;
}
.contentbox1 {
column-span: 2;
}
.autoimg img {
width: 340px;
}
.descript1 {
font-size: 14px;
float: left;
}
<div class="autocontent">
<ul class="vehicleinfo">
<li><h3>2019 FORD TRANSIT CONVERSIONS 2.0 ECOBLUE 170 17 SEAT MINIBUS WITH EVERY EXTRA</h3></li>
<li><h3 class="price">£36,500</h3></li>
</ul>
<div class="contentbox1">
<div class="autoimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/2015_Ford_Transit_460_Trend_2.2.jpg/1024px-2015_Ford_Transit_460_Trend_2.2.jpg"></div>
<div class="descript1">gold, 24,000 miles</div>
</div>
</div>
The text gets cut off and doesn't go on to another line as I expected: https://i.stack.imgur.com/tQMGN.jpg
I'm trying to get things evenly aligned having done this as a DIV and LI within DIVs.
Any help is appreciated to get this code looking more esthetically pleasing, it's working partially but the div part isn't the easiest, at least for anything contained within the class autocontent.
My problem is getting the columns to work properly.
For more proper UI layout and UX.
Try to update your HTML and CSS with following code
a {
text-decoration: none;
}
header {
margin: 0;
padding: 2em 5em 4em;
color: #efefef;
overflow: hidden;
position: relative;
}
header::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform: skewY(-3deg);
background: red;
transform-origin: bottom left;
z-index: -1;
}
div.content {
font-family: sans-serif;
font-size: 16px;
width: 460px;
}
ul.vehicleinfo {
display: block;
list-style: none;
padding: 0 10px;
}
ul.vehicleinfo li {
font-family: sans-serif;
font-size: 88%;
color: #333;
margin: 0;
padding: 5px 0;
border-radius: 10px;
}
ul.vehicleinfo li * {
display: block;
}
ul.vehicleinfo li h3 {
font-size: 1.2em;
font-weight: 700;
}
div.autocontent {
width: 760px;
margin-left: 70px;
display: flex;
background: #f3f3f3;
border-radius: 10px;
overflow: hidden;
padding: 10px;
margin-bottom: 10px;
}
.price {
font-weight: 700;
}
.contentbox1 {
column-span: 2;
}
.autoimg img {
width: 340px;
border-radius: 8px;
}
.descript1 {
font-size: 14px;
float: left;
}
<header>
<h1>VAN CENTRE</h1>
<h2>1 Anytown Road, Birmingham</h2>
<h3>0121 496 0000</h3>
</header>
<div class="content">
<div class="autocontent">
<div class="contentbox1">
<div class="autoimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/2019_Vauxhall_Vivaro_2700_Edition_1.5_Front.jpg/1024px-2019_Vauxhall_Vivaro_2700_Edition_1.5_Front.jpg"></div>
</div>
<ul class="vehicleinfo">
<li>
<h3>2019 VAUXHALL VIVARO 1.6 TURBO D</h3>
</li>
<li>
<h3 class="price">£22,500</h3>
</li>
<div class="descript1">white, 20,000 miles</div>
</ul>
</div>
<div class="autocontent">
<div class="contentbox1">
<div class="autoimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/2015_Ford_Transit_460_Trend_2.2.jpg/1024px-2015_Ford_Transit_460_Trend_2.2.jpg"></div>
</div>
<ul class="vehicleinfo">
<li>
<h3>2019 FORD TRANSIT CONVERSIONS 2.0 ECOBLUE 170 17 SEAT MINIBUS</h3>
</li>
<li>
<h3 class="price">£36,500</h3>
</li>
<div class="descript1">gold, 24,000 miles</div>
</ul>
</div>
Enjoy!
First, there are many things that can be improved in your code and I'll try to explain a bit but I won't change you code too much so you can understand:
with * you target all the elements so putting a width: 890px it's not a good default, if you want to hard reset the browser default. This is the reason your text gets cut off, you can try:
* {
margin: 0;
padding: 0;
}
use the .content div better, you can style it to align all your autocontent, so a small width doesn't do anything good if his children are larger. To get the content aligned with the header text, we can use the same padding or at least the padding-left:
div.content {
width: 800px;
padding: 2em 5em 4em;
}
use display: flex to align the elements BUT don't overuse it. Too many properties will make your code too complex, if you need some examples just check this reference: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
SIMPLIFY the code as much as you can, it will be easier to understand and debug.
Take a look in the FINAL example:
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
font-size: 16px;
color: #333;
}
a {
text-decoration: none;
}
header {
margin: 0;
padding: 2em 5em 4em;
color: #efefef;
overflow: hidden;
position: relative;
}
header::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform: skewY(-3deg);
background: red;
transform-origin: bottom left;
z-index: -1;
}
div.content {
width: 800px;
padding: 2em 5em 4em;
}
.autocontent {
border-top: 1px solid #ddd;
padding: 0 1rem;
margin-bottom: 1rem;
}
ul.vehicleinfo {
display: flex;
justify-content: space-between;
list-style: none;
}
ul.vehicleinfo li {
padding: 1rem 0;
}
.price {
text-align: right;
}
.contentbox {
display: flex;
gap: 1rem;
}
.autoimg img {
width: 320px;
}
<header>
<h1>VAN CENTRE</h1>
<h2>1 Anytown Road, Birmingham</h2>
<h3>0121 496 0000</h3>
</header>
<div class="content">
<div class="autocontent">
<ul class="vehicleinfo">
<li>
<h3>2019 VAUXHALL VIVARO 1.6 TURBO D</h3>
</li>
<li>
<h3 class="price">£22,500</h3>
</li>
</ul>
<div class="contentbox">
<div class="autoimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/2019_Vauxhall_Vivaro_2700_Edition_1.5_Front.jpg/1024px-2019_Vauxhall_Vivaro_2700_Edition_1.5_Front.jpg"></div>
<div class="description">white, 20,000 miles</div>
</div>
</div>
<div class="autocontent">
<ul class="vehicleinfo">
<li>
<h3>2019 FORD TRANSIT CONVERSIONS 2.0 ECOBLUE 170 17 SEAT MINIBUS</h3>
</li>
<li>
<h3 class="price">£36,500</h3>
</li>
</ul>
<div class="contentbox">
<div class="autoimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/2015_Ford_Transit_460_Trend_2.2.jpg/1024px-2015_Ford_Transit_460_Trend_2.2.jpg"></div>
<div class="description">gold, 24,000 miles</div>
</div>
</div>
Mainly, You're using <ul> and <li> items in the wrong way. UL tag represents a list, and description of an item isn't a list. UL tag should be used wrapping all vehicles and a vehicle should be list item. Other things are:
Invalid html body/head tags
No need for defining the same defining font-family in each html element separately
Code is messy and a lot of CSS properties are use for no reason
Try to avoid fixed widths/heights
I removed a lot of your code and tried to prepare a good starting point for you to continue working on whatever you want to build here.
body {
font-family: sans-serif !important;
}
a {
text-decoration: none;
}
header {
margin: 0;
padding: 2em 5em 4em;
color: #efefef;
overflow: hidden;
position: relative;
}
header::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform: skewY(-3deg);
background: red;
transform-origin: bottom left;
z-index: -1;
}
.content {
font-size: 16px;
padding: 50px 0;
}
.vehicle-list {
list-style: none;
margin: 0;
padding: 0;
}
.vehicle {
margin-bottom: 70px;
}
.vehicle__title {
display: flex;
justify-content: space-between;
background-color: yellow;
padding: 10px;
margin-bottom: 16px;
}
.vehicle__title h3 {
font-size: 1.2em;
max-width: 500px;
}
.vehicle__price {
text-align: right;
}
.vehicle__info {
display: flex;
}
.vehicle__description {
font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Used vans for sale - Van Centre | No.1 in the Midlands</title>
</head>
<body>
<header>
<h1>VAN CENTRE</h1>
<h2>1 Anytown Road, Birmingham</h2>
<h3>0121 496 0000</h3>
</header>
<div class="content">
<ul class="vehicle-list">
<li class="vehicle">
<div class="vehicle__title">
<h3>2019 VAUXHALL VIVARO 1.6 TURBO D</h3>
<h3 class="vehicle__price">£22,500</h3>
</div>
<div class="vehicle__info">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/2019_Vauxhall_Vivaro_2700_Edition_1.5_Front.jpg/1024px-2019_Vauxhall_Vivaro_2700_Edition_1.5_Front.jpg" class="vehicle__img" width="340px" />
<div class="vehicle__description">white, 20,000 miles</div>
</div>
</li>
<li class="vehicle">
<div class="vehicle__title">
<h3>2019 FORD TRANSIT CONVERSIONS 2.0 ECOBLUE 170 17 SEAT MINIBUS</h3>
<h3 class="vehicle__price">£36,500</h3>
</div>
<div class="vehicle__info">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/2015_Ford_Transit_460_Trend_2.2.jpg/1024px-2015_Ford_Transit_460_Trend_2.2.jpg" class="vehicle__img" width="340px" />
<div class="vehicle__description">gold, 24,000 miles</div>
</div>
</li>
</ul>
</div>
</body>
</html>
So far, I have managed to get my footer to always stick to the bottom, however, I have been struggling to get the content or images on my webpage to push the footer down. I have been trying absolute, fixed, relative positions for the footer but to no avail as the content in the class "container2" continues to go under the footer. It also shouldn't be sticky footer similar to the nav bar but like a natural footer where it is pushed down by content.
HTML/CSS: https://jsfiddle.net/jof0hzhc/2/
HTML
<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ResponsiveNav</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/script.js"> </script>
</head>
<body class="bg2">
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
ResponsiveNav
</div>
<div class="menu">
<ul>
<li>Home</li> <!--Classifying the button as "activepage" will allow the button to be red when the user is on the page.-->
<li>Current page</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<section class="content">
<p class="apphead">Heading</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="container2">
<p class="apptext">Sub-heading</p>
<div class="games">
<img src="images/1.png">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
</div>
<br><br><br><br><br><br><br><br>
</div>
</section>
</div>
<footer>
<p class="foot">
Footer text. <br>
__________________________________________________________________________________________________ <br> <br>
About us
|
Contact us <br>
__________________________________________________________________________________________________
<section>
<p class="foot">Social Media</p>
<span class="social">
<img src="images/mail.png" alt="Mail" width="50px" height="50px"/>
<img src="images/facebook.png" alt="Facebook" width="50px" height="50px"/>
<img src="images/twitter.png" alt="Twitter" width="50px" height="50px"/>
</span>
</section>
<section>
<h3>All rights reserved<br></h3>
</section>
</p>
</footer>
</body>
</html>
CSS
html, body {
margin: 0;
padding: 0;
width: 98%;
background-color: black;
min-height: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif; /*Keep this font or hamburger disappears*/
font-weight: lighter;
}
header {
width: 98%;
height: 13vh;
}
li>a{display:;}
li>a:hover, /*li hover makes the area around the list of text have a block of color around it when you hover over the text*/
li>a:focus{color:red;text-decoration:underline;} /*li focus is when you select the element, the element gets into a focus*/
footer { /*How do I even make the footer always stick at the very bottom no wonder the dimensions of the browser?*/
width:100%;
position:absolute;
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
p {
color: black;
position: relative;
margin: 5px;
padding: 10px;
}
a { /*General styling for links to other pages or websites*/
text-decoration:none;
position:relative;
font-family: Trebuchet MS, sans-serif;
}
h2 { /*Styling for site title*/
font-size: 50px;
text-align:left;
color:white;
margin: 20px;
font-family: courier;
}
h3 {
font-size:20px;
padding-left:20px;
color: white;
}
.content { /*the main container that consists of most of the existing content*/
margin-top:5px;
width:100%;
height: 1400px;
margin-left: auto;
margin-right: auto;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 1; /*Allows for the navigation bar to stack on top of content and not appear as it overlaps*/
}
nav ul {
line-height: 60px;
list-style: none;
background: black;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: orange;
opacity: 10;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: orange;
display: none;
}
.activepage {
font-size: 25px;
color: red;
text-decoration: underline;
}
.welcome {
font-family: courier;
}
.inquiry {
font-size: 17px;
color: white;
}
.container2 {
background-color: darkgrey;
padding: 10px;
margin: 0;
width: 97.8%;
height: 1000px;
z-index: 0;
position:absolute;
overflow:hidden;
}
p.heading {
font-size: 25px;
font-weight: bold;
font-family: courier;
}
.foot {
color: white;
}
.bg2 {
background-image:url("hex.jpg");
height: 550px;
width: 102%;
}
.apphead {
color: white;
font-size: 100px;
font-family: courier;
}
.apptext {
color:white;
font-size: 45px;
font-weight: bold;
font-family: courier;
}
.games {
margin:0;
position:relative;
border:solid white;
}
.games img {
width: 640px;
height:250px;
padding: 5px;
transition: 1s;
}
.games img:hover {
transform: scale(1.1);
}
.item img{
display:block;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
First off, I am a bit confused why you are using the <br> tag so much, but it almost looks like you are trying to space the elements with them. You may want to use padding or margin to do that.
Lastly, I think what you are looking for is position: fixed. Try this:
footer {
width:100%;
position: fixed; /* use fixed instead of absolute */
bottom: 0; /* set bottom to 0 */
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
You have several problems in your css. The main problem for your content not to appear is that you're using overflow: hidden; in container2 and height: 1000px; this causes everything that exceeds 1000px won't be show. Try removing overflow: hidden or overflow: x-scroll.
This is the documentation for the overflow property, I suggest you read it for a better understanding of your problem. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
There are some things that you should change 1. you are using absolute position outside relative 2. using absolute values for hight is not good practice 3. is always better use padding and margin to make space ect. Keep fixed position only for header nav and comment out all fixed hight values(px)and absolute and relative positioning to start with. Absolute position should be inside relative if there is not special reason not to do that. To get out from main problem start with footer and container2. But there is lot more to fix.
You need set a min-height for html, body {min-height: 100vh;}
Set footer as position: fixed; bottom: 0; left: 0;
Hopefully this will help you.
I am finishing up a site for my church and I am having trouble figuring out how to keep my section content inside of the container. It overflows down beyond the footer. I am not very experienced with CSS so I'm not sure where the problem is. I have tried making adjustments to the display type of the section. I already have overflow: hidden included. I'm not sure where the problem is, beyond my inexperience, that is. I know my limits are surpassed with this project for sure. I just want to help my church out with this and finish it up. Any help is appreciated greatly.
nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover:not(.active) {
background-color: #000;
}
.active {
background-color: #840D55;
}
header {
background-color: #840D55;
position: absolute;
top: 47px;
width: 100%;
border-bottom: solid;
border-bottom-color: #840D55;
}
header img {
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
#container {
height: 100%;
width: 100%;
margin-right: auto;
}
#wrapper {
position: absolute;
top: 0;
height: 100%;
width: 100%;
border-left: solid;
border-right: solid;
border-left-color: #333;
border-right-color: #333;
}
section {
height: auto;
width: auto;
color: #333;
position: relative;
top: 310px;
padding-left: 20px;
}
h1 {
position: relative;
top: 240px;
color: #333;
margin-left: 20px;
padding: 0;
text-align: center;
}
h2 {
color: #333;
}
h3 {
color: #333;
}
p {
line-height: 1.5;
}
.floatLeft {
padding-left: 40px;
width: 50%;
position: relative;
float: left;
margin: auto;
line-height: 1.8;
}
.floatRight {
width: 38%;
position: relative;
float: left;
margin: auto;
text-align: right;
padding-right: 20px;
line-height: 1.8;
}
#schAlign {
padding-right: 20px;
}
footer {
clear: both;
position: absolute;
bottom: 0px;
color: #777;
width: 100%;
background-color: #840D55;
}
<div id="wrapper">
<div id="container">
<nav>
<a class="active" href="">Home</a>
About
Pastors
Contact
</nav>
<header>
<img src="Images/bannerImg.jpg" alt="Flame of Fire Church">
</header>
<h1>In the name of Jesus, come and be blessed.</h1>
<section>
<div class="floatLeft">
<h3>Acts chapter 2 verse 38 says</h3>
<blockquote>Peter replied, "Repent and be baptized, every one of you, in the name of Jesus Christ for the forgiveness of your sins. <strong><em>And you will receive the gift of the <u>Holy Spirit</u>.</strong></em>"</blockquote>
<br />
<h3>Verse 39 continues</h3>
<blockquote>"The promise is for you and your children and for all who are far off - for all whom the Lord our God will call."</blockquote>
<br />
<p></p>
</div>
<div class="floatRight">
<h2>Service Schedule</h2>
<div id="schAlign">
<p>Wednesday Night</p>
<ul>
<li>7:00PM</li>
</ul>
<p>Sunday Morning</p>
<ul>
<li>10:00AM</li>
</ul>
</div>
</div>
</section>
</div>
<footer>
<!-- This site built with love and joy by Keith Graham -->
© Flame of Fire Church, 2017. All rights reserved.
</footer>
</div>
Updated styles (without positioning - it seems you don't need it here - and other bloat). Use margins to set distances among elements accordingly to your ideas, not positioning. Also you might want to add normalize.css before your styles for better cross-browserness. So, you can start again from here:
html {
box-sizing: border-box;
font-size: 14px;
}
*, *:before, *:after {
box-sizing: inherit;
}
nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover:not(.active) {
background-color: #000;
}
.active {
background-color: #840D55;
}
header {
background-color: #840D55;
border-bottom: solid;
border-bottom-color: #840D55;
}
header img {
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
#wrapper {
width: 90%;
margin: 0px auto;
border-left: solid;
border-right: solid;
border-left-color: #333;
border-right-color: #333;
}
section {
color: #333;
padding-left: 20px;
}
section:after {
content: "";
display: table;
clear: both;
}
h1 {
color: #333;
padding: 0;
text-align: center;
}
h2 {
color: #333;
}
h3 {
color: #333;
}
p {
line-height: 1.5;
}
.floatLeft, .floatRight {
line-height: 1.8;
width: 50%;
text-align: left;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
padding-left: 10%;
}
#schAlign {
padding-right: 20px;
}
footer {
clear: both;
color: #fff;
text-align: center;
padding: 1rem;
background-color: #840D55;
}
#media (max-width: 767px) {
#wrapper {
width: 100%;
}
.floatLeft, .floatRight {
width: 100%;
padding: .8rem;
}
}
<div id="wrapper">
<div id="container">
<nav>
<a class="active" href="">Home</a>
About
Pastors
Contact
</nav>
<header>
<img src="Images/bannerImg.jpg" alt="Flame of Fire Church">
</header>
<h1>In the name of Jesus, come and be blessed.</h1>
<section>
<div class="floatLeft">
<h3>Acts chapter 2 verse 38 says</h3>
<blockquote>Peter replied, "Repent and be baptized, every one of you, in the name of
Jesus Christ for the forgiveness of your sins. <strong><em>And you will receive the gift of the <u>Holy Spirit</u>.</strong></em>"</blockquote>
<br />
<h3>Verse 39 continues</h3>
<blockquote>"The promise is for you and your children and for all who are far off - for all whom the Lord our God will call."</blockquote>
<br />
<p></p>
</div>
<div class="floatRight">
<h2>Service Schedule</h2>
<div id="schAlign">
<p>Wednesday Night</p>
<ul>
<li>7:00PM</li>
</ul>
<p>Sunday Morning</p>
<ul>
<li>10:00AM</li>
</ul>
</div>
</div>
</section>
</div>
<footer>
<!-- This site built with love and joy by Keith Graham -->
© Flame of Fire Church, 2017. All rights reserved.
</footer>
</div>
I am having a very weird html problem. My main menu is not in its place.
<html>
<head>
<link rel="stylesheet" href="style5.css" type="text/css">
</head>
<body>
<div id="outer">
<ul>
<li class="current">Home</li>
<li>content</li>
<li>search</li>
<li>more</li>
</ul>
<div id="clear"></div>
</div>
<div id="wrapper">
<div id="pic">
<img src="logo.png">
<div id="content">
<p> Secure Search </p>
</div>
</div>
<div id="forms">
<form>
<input type="text" name="submit" size="78" style="font-size:20pt;"/>
</form>
</div>
</div>
</body>
</html>
and here's the css
body {
margin: 0;
padding: 0;
background-color: white;
}
h1,h2,h3 {
margin: 0;
padding: 0;
}
p,ul,ol,li {
margin: 0;
padding: 0;
}
#outer {
background-color: rgb(67,68,71);
}
#outer ul {
list-style: none;
margin-left: 5px;
border-left: 1px solid;
}
#outer li {
float: left;
}
.current {
background-color: rgb(56,63,137);
}
#outer a {
width: 90px;
display: block;
text-transform: uppercase;
text-decoration: none;
text-align: center;
font-weight: bold;
color: white;
border-right: 1px solid;
padding: 5px;
}
#outer a:hover {
color: black;
background-color: white;
}
#outer .current a:hover {
color: white;
background-color: inherit;
}
#clear {
clear: both;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
#pic {
margin-top: 100px;
margin-left: 389px;
position: relative;
}
#content {
position: absolute;
top: 60px;
left: 90px;
}
#forms {
margin-top: 50px;
}
Now you may ask that how come i didn't noticed my menu not in placing during early stages of coding. Well the thing is that i was using borders on wrapper div during coding and everything was in place however as soon as i removed the border the whole thing fell apart.
I think it has something to do with the float not being cleared correctly resulting in pic div messing everything up. I would be really appreciative for your suggestions.
Thank you.
I don't know what you mean by "not in its place", but removing a border suggest you have a problem with collapsing margins.
If that's the case, you could solve it by adding overflow: auto or padding: 1px 0 to the rule where you removed the border.
Replace your
<div id="clear"></div>
with
<br id="clear">
or even better change it from and id to a class. That way you can use it multiple times.
For some reason it doesn't work with the div. But the "br" also shorter so I'd prefer that anyway.
Problem:
https://postimg.cc/image/tunhwh8qj/
The trouble I am currently having is that the border around my body is not outlining everything. As I have recently learned I'm guessing this means an element is out of the flow due to floating? However I am not certain how to fix it in this case.
My html is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<img src="final.jpg" id="banner">
<ul id="nav">
<li class="links">Home</li>
<li class="links">Location</li>
<li class="links">Facilities</li>
<li class="links">Attractions</li>
<li id = "endlink">Bookings</li>
</ul>
<div id="leftcolumn">
<p>hghadgadgadg</p>
<p>easfasf</p>
<p>safSFS</p>
<p>afafafadf</p>
<p>safasf</p>
<p>saasfasf</p>
<p>fasfsaf</p>
</div>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
<div class="slideshow">
<img src="1.jpg" width="600" height="450" />
<img src="2.jpg" width="600" height="450" />
<img src="3.jpg" width="600" height="450" />
</div>
</div>
<div id ="footer">
<p> fsafasfasf </p>
</div>
</body>
</html>
and my CSS is:
html{
font-family: sans-serif;
background-color:#464E54;
height: 100%;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 3px solid black;
padding: 0;
height: 100%;
}
#banner{
padding: 0px;
margin: 0;
display: block;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
border-bottom: 1px solid #7f7f7f;
border-top: 1px solid #7f7f7f;
}
#mainc {
float: left;
width: 654px;
background-color: white;
margin: 0;
padding-left: 8px;
padding-right: 4px;
height: 100%;
}
#leftcolumn {
padding-left: 3px;
float: left;
background-color: #dad8bf;
width: 290px;
border-right: 1px solid #7f7f7f;
height: 100%;
}
#footer {
clear: both;
position: relative;
bottom: 0.5px;
margin: 0;
background-color: #dad8bf;
border-top: 1px solid #7f7f7f;
}
#footer p{
margin: 0;
}
.links {
float: left;
margin: 0px;
border-right: 1px solid #7f7f7f;
}
#endlink {
float: left;
margin: 0px;
border-right: none;
}
#lastlink{
display: block;
width: 184px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
#lastlink:hover{
background-color: #999999;
}
a:link {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:visited {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover {
background-color: #999999;
}
a:active{
background-color: #999999;
}
.slideshow {
height: 483px;
width: 632px;
margin: auto;
padding: 0px;
}
.slideshow img {
padding: 0px;
border: 1px solid #ccc;
background-color: #eee;
}
thanks in advance guys!!
This is happening because your body has fix height of 100%.Change body tag css as:
height:auto;
min-height: 100%
if this doesn't work then add following with this:
overflow:auto;
Probably better NOT to use the body element for your container. Instead, just add
<div class="container"></div>
around your code and in your CSS changehtml to body and body to div.container.
body{
font-family: sans-serif;
background-color:#464E54;
height: 100%;
}
div.container{
width: 960px;
margin: auto;
background-color: white;
border: 3px solid black;
padding: 0;
}
Edit: I completely missed the 100%, that's gotta be it.
Add overflow: hidden to your body element. When elements are floated it will not push the parent container height past it unless there is a clearer