0

How do I make a div position coordinates relative to the header? Or should I position everything relative to the bigger wrapper?

Ofc it's something it can be done in several ways but I thought it'd be best to know how is usually done.

Also, to not be opening another question, and since this can be easily answered,

To position and structure things in the website I use div right. To position a title for a block, should I used a div inside it? like you see below,

<div id="LatestQuests"> <div id="LatestQuestsTitle"> Latest Quests </div> </div>

CSS

#LatestQuests { display: block; position: relative; width: 240px; height: 190px; top: 68px; left: 18px; border-top-style: outset; border-right-style: outset; border-bottom-style: outset; border-left-style: outset; border-top-color: #000; border-right-color: #000; border-bottom-color: #000; border-left-color: #000; } #LatestQuestsTitle { background: #C0C0C0; }
Improve this question
7
  • I'm not totally clear on what you're asking, but it certainly looks like you should maybe spend a couple hours doing some html/css tutorials... Commented Dec 17, 2013 at 18:58
  • <div>s are semantically meaningless. You should generally use more appropriate html elements when possible. Depending on what you're trying to do, the "title" for a "block" of content could be a <p>, a <header>, or even a title="..." attribute or a pure css ::before. Relative/absolute positioning is pretty straightforward once you read up on it. There other techniques to do css layout as well. Commented Dec 17, 2013 at 19:02
  • also, FYI, your border syntax can probably be greatly simplified. border-style: outset and border-color: #000 will set these properties on ALL sides. You can perhaps even use the border: 1px outset #000 shorthand to set all border- properties at once. Commented Dec 17, 2013 at 19:04
  • And setting display: block on a <div> is generally redundant, as <div>s are block-level elements by default Commented Dec 17, 2013 at 19:07
  • Yah! Maybe... The way I do it is I put a project in mind and start doing, when I don't know something I google/ask and it has been going well! :D experience>theory. Although they go together; I did find a cool tutorial on positioning, but I only came about it when I actually needed it for a practical reason, barelyfitz.com/screencast/html-training/css/positioning Commented Dec 17, 2013 at 19:17

1 Answer 1

Reset to default
1

To position relative to another element, you'd need to set the position of the element you want to place as absolute (position: absolute) and that of the parent element to relative (position: relative). If there is no relative parent, then body is used. Think of #LatestQuests as a container holding information about, I assume, Latest Quests. Then any styling within it should be done in the same manner (so, yes, a div for the title, and probably one for the actual content, etc.).

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

"a div for the title, and probably one for the actual content" - So the title div doesn't go inside the div with content? (Because the way I did as you can see was puting the title div inside the content one)
The way you have it works fine. All I meant was I've always seen a setup where it's container filled with title and content. So something like this -> jsfiddle.net/zK3ep. It just helps with organization in the end.
Thanks // Why is the top and left lines of the column grey when you set them black? :P (It happened to me too) check it out in your link
Not sure what you mean - when I look at it, the border is completely black - the only gray part is the background for the title.
:o just tested it out on chrome and it doesn't happen. I see the grey lines in firefox :P
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.