Ty Meador's Profile User Rating: -----

Reputation: 5 Worker
Group:
Active Members
Active Posts:
159 (0.1 per day)
Joined:
23-May 11
Profile Views:
2,587
Last Active:
User is offline Jul 28 2015 02:03 PM
Currently:
Offline

Previous Fields

Country:
US
OS Preference:
Linux
Favorite Browser:
Chrome
Favorite Processor:
Intel
Favorite Gaming Platform:
XBox
Your Car:
Chevrolet
Dream Kudos:
0

Latest Visitors

Icon   Ty Meador has not set their status

Posts I've Made

  1. In Topic: What would cause a div to ignore CSS positioning?

    Posted 28 Jul 2015

    Fantastic. And thank you for the resources! I feel dumb now that I See that. One final question. When I set the width of the rep box to 100% it horizontally overflows. What if I wanted the box to go to the padding of it's parent? (like set the width to 100% of parent element - padding)
  2. In Topic: What would cause a div to ignore CSS positioning?

    Posted 28 Jul 2015

    View Postandrewsw, on 28 July 2015 - 01:31 PM, said:

    That code doesn't include the changes I spoke about.

    Sorry, I had tried them then I used undo before posting. here is the code with the changes that still doesn't work
    <!DOCTYPE html>
    <html>
    	<head>
    		<style>
    		#overlay{
    			visibility: visible;
    			position: absolute;
    			left: 0px;
    			top: 0px;
    			width:100%;
    			height:100%;
    			text-align:left;
    			z-index: 1000;
    			opacity:1.0;
    		}
    
    		#overlay div{
    			width:50%;
    			height: 50%;
    			overflow: auto;
    			margin: 0px auto;
    			background-color: #fff;
    			border:1px solid #000;
    			padding:15px;
    			text-align:left;
    			opacity:1.0;
    		}
    		
    		#overlay .seniorSen, #overlay .juniorSen{
    			display:inline-block;
    			width: 40%;
    			height:40%;
    		}
    		
    		#overlay .seniorSen{
    			float: left;
    		}
    		
    		#overlay .juniorSen{
    			float: right;
    		}
    		
    		#overlay .rep{
    			display: inline-block;
    			margin-top:15px;
    			width: 94%;
    			margin: 0 auto;
    		}
    		</style>
    	</head>
    
    	<body>
    		<div id="overlay">
    			<div id="overlayContent">
    				<div id="seniorSen" class="seniorSen">
    					<img id="seniorSenPic" src="https://www.govtrack.us/data/photos/300072-100px.jpeg" alt="">
    					<h4 id="seniorSenName">Brett Guthrie</h4>
    					<p class="picLabel" id="seniorSenPicLabel">Senior Senator</p>
    				</div>
    				
    				<div id="juniorSen" class="juniorSen">
    					<img id="juniorSenPic" src="https://www.govtrack.us/data/photos/412492-100px.jpeg" alt="">
    					<p class="picLabel" id="juniorSenPicLabel">Junior Senator</p>
    				</div>
    				
    				<div id="rep" class="rep">
    					<img id="repPic" src="https://www.govtrack.us/data/photos/400431-100px.jpeg" alt="">
    					<p id="repPicLabel" src="" alt="">Representative</p>
    				</div>
    			</div>
    		</div>	
    	</body>
    </html>
    
  3. In Topic: What would cause a div to ignore CSS positioning?

    Posted 28 Jul 2015

    View Postandrewsw, on 28 July 2015 - 01:17 PM, said:

    You'll probably discover that 'top' has a line through it, because it is ignored.
    That was a Typo. I'm using margin-top as well as chromes debugger. (Comes in SUPER handy for javascript) Here is my current code
    <!DOCTYPE html>
    <html>
    	<head>
    		<style>
    		#overlay{
    			visibility: visible;
    			position: absolute;
    			left: 0px;
    			top: 0px;
    			width:100%;
    			height:100%;
    			text-align:left;
    			z-index: 1000;
    			opacity:1.0;
    		}
    
    		#overlay div{
    			width:50%;
    			height: 50%;
    			overflow: auto;
    			margin: 0px auto;
    			background-color: #fff;
    			border:1px solid #000;
    			padding:15px;
    			text-align:left;
    			opacity:1.0;
    		}
    		
    		#overlay .seniorSen, #overlay .juniorSen{
    			display:inline-block;
    			width: 40%;
    			height:40%;
    		}
    		
    		#overlay .seniorSen{
    			float: left;
    		}
    		
    		#overlay .juniorSen{
    			float: right;
    		}
    		
    		#overlay .rep{
    			display: inline-block;
    margin-top:15px;
    			width: 94%;
    			margin: 0 auto;
    		}
    		</style>
    	</head>
    
    	<body>
    		<div id="overlay">
    			<div id="overlayContent">
    				<div id="seniorSen" class="seniorSen">
    					<img id="seniorSenPic" src="https://www.govtrack.us/data/photos/300072-100px.jpeg" alt="">
    					<h4 id="seniorSenName">Brett Guthrie</h4>
    					<p class="picLabel" id="seniorSenPicLabel">Senior Senator</p>
    				</div>
    				
    				<div id="juniorSen" class="juniorSen">
    					<img id="juniorSenPic" src="https://www.govtrack.us/data/photos/412492-100px.jpeg" alt="">
    					<p class="picLabel" id="juniorSenPicLabel">Junior Senator</p>
    				</div>
    				
    				<div id="rep" class="rep">
    					<img id="repPic" src="https://www.govtrack.us/data/photos/400431-100px.jpeg" alt="">
    					<p id="repPicLabel" src="" alt="">Representative</p>
    				</div>
    			</div>
    		</div>	
    	</body>
    </html>
    


    Why does it seem like every object has to be positioned differently? It's so frustrating to have your CSS work fine for one element and not another. What am I not understanding here?
  4. In Topic: What would cause a div to ignore CSS positioning?

    Posted 28 Jul 2015

    By changing it to display:inline-block; and trying both top:15px; margin-top:15px; nothing has changed. The reason there are two divs inside one another is for the popup dialogue that this will be. I use it in javascript to determine whether the user clicked inside the popup box or outside. Also, I'm VERY big on efficiency/minification Once I get a document the way I want it I go through and remove all debugging procedures and CSS rules I don't need. Then I minify the CSS and JS ( I then save this copy to a different version with _minified appended to the name, so that I still have a human readable version available)
  5. In Topic: What would cause a div to ignore CSS positioning?

    Posted 28 Jul 2015

    That helped out a LOT. But I can't seem to get the "rep" box to move vertically. I want it to be the width of the parent div, but have a small gape between it and the two senators above it. However, right now the rep box is right up against the senators boxes. (I promise I'm not trying to get you all to do my work for me.) I've been having trouble with positioning in CSS ever since I started web development. Even with the clusterLuck of languages I've had to learn, PHP, HTML, SQL, Javascript, CSS, XML, the one thing I can't seem to understand Is positioning in CSS. And I'm not talking about just the CSS keyword "position: relative|absolute|static" ect. I mean placing an object on the screen at a certain place. I'll be going fine and then I'll get one element (like these) that won't respond to any of the CSS I'm writing. Any good beginner documentation on how to position stuff on the screen VIA CSS? lol

    <!DOCTYPE html>
    <html>
    	<head>
    		<style>
    		#overlay{
    			visibility: visible;
    			position: absolute;
    			left: 0px;
    			top: 0px;
    			width:100%;
    			height:100%;
    			text-align:left;
    			z-index: 1000;
    			opacity:1.0;
    		}
    
    		#overlay div{
    			width:50%;
    			height: 50%;
    			overflow: auto;
    			margin: 0px auto;
    			background-color: #fff;
    			border:1px solid #000;
    			padding:15px;
    			text-align:left;
    			opacity:1.0;
    		}
    		
    		#overlay .seniorSen, #overlay .juniorSen{
    			display:inline-block;
    			width: 40%;
    			height:40%;
    		}
    		
    		#overlay .seniorSen{
    			float: left;
    		}
    		
    		#overlay .juniorSen{
    			float: right;
    		}
    		
    		#overlay .rep{
    			display: block;
    			
    			width: 94%;
    			margin: 0 auto;
    		}
    		</style>
    	</head>
    
    	<body>
    		<div id="overlay">
    			<div id="overlayContent">
    				<div id="seniorSen" class="seniorSen">
    					<img id="seniorSenPic" src="https://www.govtrack.us/data/photos/300072-100px.jpeg" alt="">
    					<h4 id="seniorSenName">Brett Guthrie</h4>
    					<p class="picLabel" id="seniorSenPicLabel">Senior Senator</p>
    				</div>
    				
    				<div id="juniorSen" class="juniorSen">
    					<img id="juniorSenPic" src="https://www.govtrack.us/data/photos/412492-100px.jpeg" alt="">
    					<p class="picLabel" id="juniorSenPicLabel">Junior Senator</p>
    				</div>
    				
    				<div id="rep" class="rep">
    					<img id="repPic" src="https://www.govtrack.us/data/photos/400431-100px.jpeg" alt="">
    					<p id="repPicLabel" src="" alt="">Representative</p>
    				</div>
    			</div>
    		</div>	
    	</body>
    </html>
    

My Information

Member Title:
D.I.C Head
Age:
22 years old
Birthday:
July 5, 1993
Gender:
Years Programming:
4
Programming Languages:
C++, Java,HTML,CSS,MySQL

Contact Information

E-mail:
Click here to e-mail me

Friends

Comments

Ty Meador has no profile comments yet. Why not say hello?