First time posting - Need help organising my site - code confused!

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register

16-May-17 11:25
Basicly I'm making a site for school work, and I feel I'm already messing up. I'm trying to secure a responsive webdesign, but it's proving itself harder than I thought.

This is my code:

HTML


<!DOCTYPE html>
<html lang="en-us">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<div class="logo">
/** logo goes here (removed it for privacy reasons) **/
</div>
<div class="nav">
<li class="home"><a href="#">Home</a></li>
<li class="activities"><a href="#">Activities</a></li>
<li class="information"><a href="#">Information</a></li>
<li class="aboutus"><a href="#">About the thing</a></li>
</div>
<nav>

<footer>
<div class="footer">
<section class="subscribe">
<div class="news">
<h3>Receive our newsletter</h3>
</div>
<form action="index.html" method="post" class="subscribe-form">
<input type="email" name="email" class="subscribeInput" placeholder="Email address" autofocus>
<button type="submit" class="subscribeSubmit">Submit</button>
</form>
</section>
</div>
<div class="footerText">
<h4>Address goes here</h4>
<h4>Phone number and e-mail goes here</h4>
<h4>Opening hours goes here</h4>
</div>
</div>
</footer>
</body>
</html>


CSS:



body {
font-family: 'Arial'

}
.nav {
width: 100%;
margin-top: -15px;
padding-top: 10px;
list-style: none;
background-color: #052D48;
text-align: center;
overflow: hidden;
height: 70px;

}
.nav li {
display: inline-block;
}
.nav a {
text-decoration: none;
color: #FFF;
font-family: Arial, sans-serif;
font-weight: bold;
letter-spacing: 1.5px;
font-size: 12px;
}

.hjem {
float: left;
padding: 0 7% 0 7%;
}

.oplevelser {
float: left;
}

.praktiskInfo {
float: right;
padding: 0 7% 0 7%;
}

.omCentret {
float: right;
}

.footer {
background:#052D48;
width:100%;

position:absolute;
bottom:0;
left:0;

}

.news h3 {
color: #FFF;
margin-left: 2%;
font-size: 12px;
}

.subscribeInput {
margin-left: 2%;
border: none;
color: #fff;
padding: 12px 29px;
text-decoration: none;
display: inline-block;
font-size: 16px;
}

.footerText h4 {
color: #FFF;
display: table;
margin-left: auto;
margin-right: auto;
}

.footerText {
text-align: center;
}

.footer > a {
text-align: center;
}

.subscribeSubmit {
background-color: #E55B00; /* Green */
border: none;
color: white;
padding: 12px 29px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}

.nav>li{
position:relative;
}

.logo {
position:absolute;
z-index:10;
display:block;
width: 200px;
height: 350px;

}


This is what I'm trying to achieve:
http://i.imgur.com/wdmzofb.png

The logo going down over the navbar. I can only get it to fit inside the navbar, but I want the parts of the logo to reach down over INTO the body part of the page.

Sorry for formatting, I really hope someone can help me!

[Edited by chrishirst on 16-May-17 12:23]
16-May-17 12:21
"but I want the parts of the logo to reach down over INTO the body part of the page."

Use relative positioning (http://webmaster-talk.eu/articles/8-website-development-and-design/13-css-positioning) and offset the logo image element to suit.

Then use top padding on the content holder element so the actual content is not obscured.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
17-May-17 05:31
Thanks for the reply Chris.

What exactly do you mean by "and offset the logo image element to suit." ?

and when you say "content holder element" you are referring to the <div class="logo"> - correct?

EDIT: Oh I think I have explained myself poorly. What I am intending to do, is placing the brand logo centrally in the nav bar, where the lowest part of the logo goes down over the nav bar.

Think like:

home activities CocaCola about contact

and then the lower parts of of the CocaCola logo will go a bit under the navbar.

[Edited by codeman25 on 17-May-17 05:44]
22-May-17 08:18
'offset' is to use the top, right, left, bottom properties to align the logo element (if necessary) within the navigation element, which strictly speaking should be an unsorted list (ul) NOT a division (div).

The "content holder element" is simply the element that contains whatever the 'content' is for that particular document, and in your code will probably be after the navigation element and before the 'footer' element

eg.:

'Nav' here

'Content' here

'Footer' here

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
22-May-17 12:17
Start your OWN thread instead of hijacking someone else's unrelated one

http://www.elated.com/forums/authoring-and-programming/topic/new/

[Edited by chrishirst on 22-May-17 13:32]

 
New posts
Old posts

Follow Elated