The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Responsive header
Legless
post Feb 23 2017, 11:21 AM
Post #1


Newbie
*

Group: Members
Posts: 16
Joined: 6-January 17
Member No.: 26,256



Hello,

For the first time in many years, I have to write some html/css code - and ohhhh how the web has moved on.... wink.gif

I have to make a header for a forum which is 1000px wide and centered in the middle of the page.
It has a logo to the left and a banner to the right and then some links underneath.

It also should be responsive - but I can't even get the first part done. (i.e. floating the banner to the right.)

Here is what I have so far...

CODE

#myWrap { width: 1000px; margin: 0 auto;  padding-top: 12px; border: solid 1px #ff0000;}
#forumLogo {display: inline-block; float: left; }
#forumBanner {display:  float: right; width: 500px;}

#forumMenu {margin: 10px 0; text-align:center;}
.forumMenu li {display: inline; }
.forumMenu li a{display: inline-block;}

.clearfix { style="clear: both;"}



CODE

<div id="myWrap">

<div id="forumLogo">
LOGO
</div>

<div id=forumBanner">
BANNER
</div>

<div class="clearfix;"></div>

<div id="forumMenu">
<ul class="forumMenu">
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</div>

</div>



Would it be possible for someone to give me some pointers here? I am stuck! sad.gif

Thanks. smile.gif

This post has been edited by Legless: Feb 23 2017, 11:22 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 23 2017, 11:43 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You have an error here.
CODE
#forumBanner {display:  float: right; width: 500px;}


display: what?. Probably that makes the float: right not being read properly.

I wonder why you need to change the display of #forumLogo and #forumBanner? And are the logo and banner images? Then why do you need the DIVs at all? Just float the images.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Legless
post Feb 23 2017, 02:04 PM
Post #3


Newbie
*

Group: Members
Posts: 16
Joined: 6-January 17
Member No.: 26,256



Ooops. That display had been display: inline-block
(I'm not sure where that text got lost!)

...and yes, I was overthinking it. I just floated the images as you suggested.

The only thing is, the clearing div doesn't work now.

What would be the correct way to do that?

...and how could I make this responsive?

CODE

#myWrap { width: 1000px; margin: 0 auto;  padding-top: 12px; border: solid 1px #ff0000;}
#forumLogo {float: left; }
#forumBanner {float: right; }

#forumMenu {margin: 10px 0; text-align:center;}
.forumMenu li {display: inline; }
.forumMenu li a{display: inline-block;}

.clearfix { style="clear: both;"}



CODE

<div id="myWrap">

<img src="a.jpg" id="forumLogo" width="200" height="60" border="1">

<img src="b.jpg" id="forumBanner" width="400" height="60" border="1">


<div class="clearfix;"></div>

<div id="forumMenu">
<ul class="forumMenu">
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</div>

</div>


This post has been edited by Legless: Feb 23 2017, 02:08 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 23 2017, 02:29 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Because you've written HTML in your CSS.

CODE
.clearfix { style="clear: both;"}


style="" has nothing to do there.

And you've written CSS in your HTML too.

CODE
<div class="clearfix;"></div


The semicolon shouldn't be there.

You can get rid of that clearfix DIV and probably the DIV around UL too. UL is a good enough container in itself. You can apply the CSS to that directly. Unless of course you plan to have other things in div#forumMenu too. In that case you can apply the clear to #forumMenu and still get rid of the clearfix div. Less is more! wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Legless
post Feb 23 2017, 02:40 PM
Post #5


Newbie
*

Group: Members
Posts: 16
Joined: 6-January 17
Member No.: 26,256



Yee gods, I think I have early onset dementia.

I never used to be this bad. Back to the books, then...


Thank you Pandy.

This post has been edited by Legless: Feb 23 2017, 02:46 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 23 2017, 03:25 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(Legless @ Feb 23 2017, 05:21 PM) *

I have to make a header for a forum which is 1000px wide
...
It also should be responsive

FWIW, responsive and fixed-width layouts tend to rule each other out (unless perhaps if you switch between several layouts of various fixed widths, using media queries).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Legless
post Feb 23 2017, 03:35 PM
Post #7


Newbie
*

Group: Members
Posts: 16
Joined: 6-January 17
Member No.: 26,256



QUOTE(Christian J @ Feb 23 2017, 08:25 PM) *

FWIW, responsive and fixed-width layouts tend to rule each other out (unless perhaps if you switch between several layouts of various fixed widths, using media queries).


I had a feeling that may have been the case, but I tried this anyway...

CODE
#myWrap { margin: 0 auto;  padding-top: 10px; max-width:1000px; height:auto;}


..and as far as I can see, it seems to be working.

But clearly, I need to start learning about these things.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 23 2017, 06:53 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Yeah, because you no longer use a fixed width. smile.gif

To tell the truth, I'm a little confused about the terminology. I think "responsive" actually means something more than this, but there has been so many different terms in this area.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 23 2017, 07:33 PM
Post #9


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Feb 24 2017, 12:53 AM) *

To tell the truth, I'm a little confused about the terminology.

According to https://en.wikipedia.org/wiki/Responsive_web_design "responsive design" is more or less the same as a fluid layout. That said, the article seems questionable:

QUOTE
The first site to feature a layout that adapts to browser viewport width was Audi.com launched in late 2001.

Surely the Wikipedia contributor can't mean that no web pages adapted themselves to the browser viewport width before 2001? unsure.gif Perhaps only active (javascript- or CSS3-based) viewport width sniffing qualifies, not the adaptive default behavior of HTML as described in http://htmlhelp.com/faq/html/design.html#screen-size

According to the same Wikipedia entry, the term was first coined in http://www.alistapart.com/articles/responsive-web-design/ for layouts using CSS3 media queries. My guess is that "responsive design" has later been embraced as a buzzword by designers that don't know how to create fluid layouts any other way.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 24 2017, 04:18 AM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I *think* most people use responsive when everything adapts, images and all.

There was something else before fluid, forgotten what we called it. It was murky waters already then.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 24 2017, 10:16 AM
Post #11


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Feb 24 2017, 10:18 AM) *

I *think* most people use responsive when everything adapts, images and all.

True, even though you could resize images (using percent values for width and height) nobody bothered.

QUOTE
There was something else before fluid, forgotten what we called it. It was murky waters already then.

AFAIK fluid was the first one, possibly invented as a reaction to fixed-width layouts (originally done with tables). Before the latter I guess there was no need for any term, since there was nothing but HTML's default behavior.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 24 2017, 01:10 PM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



No, fluid was the second. And it wasn't exactly the same as what I can't remember the name of, but I never got the difference really. What was it called? Not flexible, but something like that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 24 2017, 01:12 PM
Post #13


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Elastic? Could that be it? Sometimes I also read liquid, but that's probably the same as fluid. wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 24 2017, 01:53 PM
Post #14


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Elastic (and liquid?) were much later, I think they appeared with CSS layouts. I recall fluid existed even before that, when people used layout tables and spacer GIFs. When we discussed layout techniques on this forum around 2001-2003 we only used the term fluid.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 24 2017, 02:30 PM
Post #15


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Nuh. mad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 12:11 PM