Aucun
-
Posts
11 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Everything posted by Aucun
-
I'll give that a search. The reason I have the style tags there is because I don't want to copy/paste my css file, but rather only take what is needed as an example; for simplicity sake.
-
Not really sure how to label this, but I know how to describe it. Here is what I'm trying to do: Create pages that can be navigated using <a>'s in the form of a <div> tag button. Right now I can use a fixed height like 768px, but I'm not able to use 100% as it removed the height. I have each page in a container with a pre-set height of 768px, and I have a button at the bottom (a div tag inside a <a> tag) that when clicked moved to the start of the nest page. I also have elements inside the page above the button at the bottom. The page has a "min-height" of 768px so it doesn't displace elements. The end result is to have page (container) that scales to the height of the browser and doesn't go below 768px. The button needs to be placed at the very bottom of the page regardless of other elements. Here is my code so far: <!DOCTYPE html><html> <body> <div id="first-page-container"> <p>Text and stuff goes here.</p> <a href="#link"> <div class="bottom"> <p>This is my button</p> </div> </a> </div> </body> <style> #first-page-container { min-width:1024px; height:768px; background-color:grey; } div.bottom { position:absolute; top:748px; } </style></html> I'm not sure how this is going to work, I've tried using 100% height but with no success.
-
Hmm, I didn't know font did that. Can you remove the 1em below and above the font, so it fits within the div tag easier? If not, at least I know the problem now, thanks for all the help.
-
The reason I had negative values on the side boxes was to move it up more, and I also wanted the middle to move up more. Adding margin values to the middle makes it mess up. How would I move the middle one up -35px with the sides? Thanks for the help so far.
-
I'm trying to get two side and a center for this page. After googling how to have an object in the center take the remaining width, I came across this weird problem. The center is placed down from the top, unlike the two sides. Here is the code I'm working with right now: <html> <body> <div id="main-container"> <div class="main-left-box"> <div class="main-title"> <p class="main-title">Box #1</p> </div> <div class="main-body-center"> <p>This is box #1</p> </div> </div> <div class="main-right-box"> <div class="main-title"> <p class="main-title">Box #2</p> </div> <div class="main-body"> <p>This is box #2</p> </div> </div> <div class="main-left-box"> <div class="main-title"> <p class="main-title">Box #3</p> </div> <div class="main-body-center"> <p>This is box #3</p> </div> </div> <div class="main-center-box"> <div class="main-center-title"> <p class="main-title">Why is this not aligned with the rest?</p> </div> </div> </div> </body> <style> #main-container { width:90%; min-width:976px; background-color:grey; margin-left:auto; margin-right:auto; border-radius:5px; border:2px solid rgb(160, 160, 160); overflow:auto; padding-top:15px; } div.main-left-box { width:240px; padding:10px; margin-top:-39px; float:left; clear:left; } div.main-right-box { width:240px; padding:10px; margin-top:-39px; float:right; clear:right; } div.main-title { width:240px; height:35px; background-color:rgb(60, 60, 60); border-radius:10px; text-align:center; } p.main-title { color:white; padding-top:5px; text-decoration:underline; } div.main-body { width:220px; background-color:rgba(220, 220, 220, 0.6); margin-top:2px; border-radius:10px; padding:10px; } div.main-body-center { width:220px; background-color:rgba(220, 220, 220, 0.6); margin-top:2px; border-radius:10px; padding:10px; text-align:center; } div.main-center-box { overflow:hidden; } div.main-center-title { height:35px; background-color:rgb(60, 60, 60); border-radius:10px; text-align:center; } </style></html> I'm not sure why it's doing this, and I can't find a good example when searching for this problem.
-
Very nice, I wasn't aware order of div's had meaning when using float. Thank you good sir.
-
I'm trying to get these boxes to line up properly, but they just don't want to. Here is the code I'm working with right now: <!DOCTYPE html><html> <head> <title>Test Page</title> </head> <body> <div id="container"> <div id="floats"> <div id="leftupper"> </div> <div id="leftlower"> </div> <div id="rightupper"> </div> </div> </div> </body> <style> #container { height:1500px; margin:auto; } #floats { width:1024px; height:800px; margin:auto; } #leftupper { width:300px; height:300px; background-color:blue; float:left; } #leftlower { width:300px; height:200px; background-color:blue; margin-top:10px; float:left; clear:left; } #rightupper { width:675px; height:200px; background-color:red; float:right; } </style></html> I can't see why it wouldn't float right near the top, but rather under the leftupper.
-
Here is an example of what I want to do: <html><body><div id="name"><p>dsgsdfgs</p></div></body></html> Change it to say: <html><body><div id="name"><h1>asfasfasf</h1></div></body></html>
-
Does anything need to be changed to replace HTML in the div tag then?
-
Hello, I'm very new to Javascript and I have a few questions regarding it's use with HTML. I'm trying to change HTML code for when a <div> tag is hovered over (the div is a "button" of sorts). I need the HTML in a specific <div> tag to change when the button is hovered over, and then remain until another button is hovered over. I've done some searching and found a few things that will probably work I'm just not sure how to put them together properly. I found this example that shows text being changed: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><head><title>I can change text =) </title><style type=text/css>div{font-family: Georgia}</style></head><body><script type=text/javascript>function changetext(){var textchange2 = "This is the new me " ;var id = document.getElementById("DP");id.innerHTML=textchange2;}</script><div id="DP" onmouseover="changetext();">Lets say this is text 1</div></body></html> I'm not sure how to apply HTML as the "text", and if it replaces or adds to what is already inside the <div> tag. The button is not the same <div> tag that needs to be changed.
-
I'm using @media to try and get the screen resolution but I'm not sure how the statements work. For example, if I want know when the viewer has a screen of 1920*1080; here is what I have so far: @media (min-width: 1920px) { } Is there a better way of doing this? Also, when you have many @media's how can you define an "if" type statement to check for different resolutions.