HTML gods, help me: two html elements in one html file?

Operating Systems & Open Source Open Source & Web-Based
1

I'm a noob with html, usually dealing with it with trial and errors and simple logic. But now I want to achieve something that I'm not able to do. I already use a html layout that I want to duplicate in the same html document. And each of the elements in each layout must be independent and be only limited to their layout (as depicted in the picture). How can I achieve that?

html2.png800x600 20.7 KB

2

So you just want two areas on a single web page that have the same layout with the menu on left and tiles on the right?

Just make sure they are in different divs. Also, you are controlling all of your style in CCS, right?

If you'd like to apply different formatting to the two sections, you can assign class names to both divs and then add different style statements in the CSS:

In CSS:

.divA {
color: #00FF00;
...
}

.divB {
color: FF0000;
...
}

In the HTML

<div class ="divA">
Content goes here
</div>

<div class ="divB">
Content goes here
</div>
4

This doesnt seem that complex unless I'm not understanding the OP

5

Yes. But, I have 3 style sections in the head of the layout, two that are in CSS. In one of these, there is the backgroung which need to be different for each areas. And one in javascript that dictates how the menu acts.

6

So yeah you would just make sure that all of the html code for each "layout" is placed within two large separated divs. You'd assign class names to both the divs (and possibly elements contained within the divs) and then in the CSS, you can change style elements (background-color, background-image, etc etc) for each div.

8

But my problem here is that my css style looks llike that and I don't know where to put that div (remember I'm a noob)

body {
color:#ffffff;
font-family: sans-serif;
}
.main {
width: 940px;
margin: auto;
height: 700px;
padding: 10px 0px;
background: url(http://i.imgur.com/fF8atLK.jpg) ;
}
.infobox {
border-radius: 8px; -moz-border-radius: 8px;
width: 350px; /*Adjust infobox width as required*/
float: right;
clear: left;
padding: 10px 8px;
opacity: 1.00;
color:white;
margin-right: 40px;
margin-top: 10px;
.......

And I need a way to div also the script for the menu or otherwise the menu only appear one the first layout and the tiles on the 2nd layout still has an effect on the menu

9

The two divs would be placed in the html within the body section. Potentially, you'd have something like this:

<body>
  <div class="layout1">
      All html relating to layout 1
  </div>
  <div class="layout2">
      All html relating to layout 2
  </div>
</body>

It is perfectly ok to have nested divs - i.e something like:

<div class="layout1">
      <div>
            <div>
            </div>
      </div>
</div>

There's always multiple ways of tackling things when html and css are involved. In this case, you can likely rename the various objects in the second layout section and then modify the script to act on those renamed objects potentially. For instance, tiles in the first layout section could have a class of "tilea" while those in the second layout section could be of class "tileb". Not having all the code and script makes it a bit difficult to figure out.

1 Like
10

I did that

I tried that but without success for the menu, only work for the background (I'm sure it must be a stupid error from me again). The original layout is this one if this can help out figure out my problems: https://onedrive.live.com/redir?resid=34920294CF39F31F!1167&authkey=!AISpPhOfMnT5O_4&ithint=file%2chtml

11

I think I almost got it. Now the menu appears in each layout separatly and answer separatly. Just that when one appear, the other one disappear but I think I can figure this out. I had not seen some objects that were involving the menu so it's why it was not working :p

edit: everything works now as I wanted ^^ thank you @_Alamar to have helped me and supported my noobness

3 Likes
12

Just for grins I'd like to see your final code you ended up with I'm curious after reading the thread :D

13

No problem. I was a bit busy tonight. Sorry to not provide more info. Nice job getting it working!

14

Here you go: https://onedrive.live.com/redir?resid=34920294CF39F31F!1168&authkey=!AH2gHbGoJXm2IAg&ithint=file%2chtml May look a little bit like a slaughter html code ;)

15

I'd definitely recommend moving all your style markup to a separate css file. It makes things much cleaner and you can control all formatting for all site pages from the css file rather than having to update individual pages if you want to roll out some style changes across your entire website.

You'd use something like the following in your head to link to the css file:

<link rel="stylesheet" type="text/css" href="filename.css">
16

for my use I cannot as it's a description embedded in a website.