|
PHP - Navbar Height Cover?
Hello everybody, I have a problem with my site I am making.
http://gmann.gflclan.com/index.php (this is a test site, I am not even near close to being done with it).
The problem I am having is, when I make my browser smaller, the navbar body doesn't move down (expand).
#navbar {
width:auto;
height: 5%;
position:relative;
background:url(images/transbg4.png);
border-radius:15px 15px 0px 0px;
box-shadow: 5px 5px 10px #121212;
margin-left: 30%;
margin-right: 30%;
color: white;
text-align: left;
}
There's the code. I think it has to do with "height: 5%;". Do you guys have any idea on how to fix this. I am learning coding, and sorry if this is a "noob" question.
Also, if you want, feel free to give suggestions for the site, I already know it looks horrible but I plan on making it better in the future.
Here is the navbar in the PHP file I made:
<div id="navbar">
<ul id="nav_links">
<?php
$query = "SELECT * FROM `navlist` ORDER BY `lorder` ASC";
$result = mysqli_query($db, $query) or die ('Error with the nav list query! Error: ' . mysqli_error($db));
while ($nav = mysqli_fetch_assoc($result)) {
echo '<div class="navlink">';
$target = '';
if($nav['newpage'] == 1) {
$target = 'target=_blank';
} else {
$target = '';
}
echo '<li class="nav_button"><a href="' . $nav['link'] . '" ' . $target . '>' . $nav['name'] . '</a></li>';
echo '</div>';
}
?>
</ul>
</div>
Thanks,
Gamemann
Similar TutorialsThis topic has been moved to Miscellaneous. http://www.phpfreaks.com/forums/index.php?topic=332865.0 Hey guys, I am having trouble centering a navbar with css on my template.
Here is a jsfiddle live preview for you.
http://jsfiddle.net/LRS38/
I added text-align:center; to it but it still wont center. I also added a margin:0 auto; but no luck.
Can anyone see what I am doing wrong?
<div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="current"><a href="#">Services</a></li> <li><a href="#">Contact us</a></li> </ul> </div>and
#navigation {
text-align:center;
background-color:#ef6b51;
overflow:hidden;
}
Hey guys, I am working on something and keep getting some padding on my css navabar, its pretty simple but I cant figure out where it grabbing the padding from pushing it about 5 pixels to the right. jsfiddle live preview is a demo and here is a picture of the hover over. Notice the little gray space in between the hovered over Update Profile? I cant seem to find the code anywhere that would cause that. Anyone notice anything in my code?
<head>
<title>2 Column CSS Layout</title>
<style type="text/css">
body {
margin: 20px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
background-color: #555;
}
#nav {
text-align:center;
}
/* Begin Navigation Bar Styling */
#nav ul {
text-align: center;
font-size: 11px;
width: 100%;
margin: 0;
padding: 0;
display:inline-block;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav li {
display:inline-block;
}
#nav li a
{
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
background-color: #fff; }
/* End navigation bar styling. */
div {
text-align:center;
}
div#page {
background-color: white;
margin: 0 auto;
text-align: left;
width: 755px;
padding:0px 10px 0 10px;
}
div#header {
border-bottom:1px solid black;
height: 30px;
line-height: 30px;
}
div#content {
background: none repeat scroll 0 0 none;
border:0px solid blue;
width:100%;
line-height: 500px;
min-height:500px;
_height:500px
}
div#footer {
border:0px solid red;
height:30px;
line-height: 30px;
border-top:1px solid black;
font-size: 9pt;
}
</style>
<body>
<div id="page">
<div id="header">
<div style="float: left;">Welcome Admin</div>
<div style="float: right;">LOGOUT</div>
<div id="nav">
<ul id="nav">
<li><a href="#">Home Page</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">Update Profile</a></li>
<li><a href="#">Change Avatar</a></li>
<li><a href="#">Change Password</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
</div>
<div id="content">Content</div>
<div id="footer"><div style="float: right;">copyright 2014</div></div>
</div>
</body>
Hi there. How can i set up a maximum width and height of a picture? For example: the limit is 400x400. So if the photo is 200x200 then it stays that way, however if a photo is 550x550 then it gets resized to 400x400. I have a code that will get the value of amount from $_GET, and it adds it to an image I have stored. My problem is the that image I use is 32x32, but I need to add more height to it to make it look correct. The image is transparent so I'd need to keep that also. The code I have now works, but the value of amount is on top of the image where I don't want it to be. Here's my code. <?php header("Content-type: image/png"); $image = $_GET['image'] .'.png'; $img_handler = imageCreateFromPNG("./item images/" . $image); imagesavealpha($img_handler, true); $color = ImageColorAllocate($img_handler, 204, 156, 12); ImageString($img_handler, 2, 0, 0, $_GET['amount'], $color); ImagePng($img_handler); ImageDestroy($img_handler); ?> Hello, im new to css and i need a little help creating a navigation bar which is horizontal, i want it to fill its containing divs height.
here is the simple html
<div id="nav-bar">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</div>
here is the css being used
#nav-bar {
background-color: #494c51;
width: auto;
position: relative;
height: 44px;
border-style: solid;
<!-- background-color: #242528; This is the color of the hover -->
border-color: #000;
border-width: thin;
}
#nav-bar ul, li {
padding: 0;
list-style-type: none;
display: inline;
line-height: 44px; <!-- this aligns the ul/li into the middle virtically -->
height: 44px;
border-bottom-color: red;
border-style: solid;
}
so #nav bar has a height of 44px which is working, so i assumed i could set height of #nav-bar ul, li to 100% and it would work, but it doesnt, i have also tried putting these values in a new div but that didnt work either.
can anyone help me with this?
thanks
I have put together a new website and I am having a problem that is frustrating me to no end so I am here looking for expert help.
In my "content" column, I am trying to have the article I have written. This content is going to change from page to page depending on the amount of content. At the bottom of the "content" I am trying to add a comments section.
To the right of the "content" column I have a "sidebar" and the problem I am having is as the "content" column grows or shrinks, it is effecting the positioning of the "sidebar" and moves the content of the "sidebar" up or down.
I have tried to investigate how to correct this and what I have read makes absolutely no sense to me so the only way I can figure out to fix this (keeping in mind that I am in the process of teaching myself CSS and I use the trial and error method of learning) is to set the height of the "content" column to a fixed number and then force the "sidebar" to move up or down by using something like 'margin-top: -1200px". The problem with this is when comments are added, the content of the "sidebar" moves down.
My question is, does anyone know of a way to get both columns to adjust to equal heights that won't cause me to pull what little hair I have left out? Would that anyone be willing to explain to me why your method should work?
I know that I should include the code for the page I am having the problem with, but it is (in my opinion) pretty extensive and if someone is willing to try to tackle this it might be easier to just bring up the source code.
Just FYI . . . the page in question can be seen at http://pickmysmoker....ne_smokers.php/
Thanks in advance . . .
What I am working on is a background to a user input comment -- essentially a framed box around the comment. For some reason I cannot fathom but which is probably simple, I can't get the image height variable, (set by the length of the comment) to be seen by the code outputting the framed box. So here's what I got: To set the image position and height variables I put this code inside of a while loop, since there are multiple comments in the DB: Code: [Select] //Looks at the comment in the DB //Calculates the number of lines based on 75 characters per line $line_count = ceil(strlen($row3['comment'] /75)); //This sets the position of the username who posted the comment $username_pos = ($text_pos + ($line_count * 33)) . ".00pt"; //Sets the initial starting position of the framed box on the page $box_pos = $text_pos - 42.00 . ".00pt"; //Sets the height of the framed box $box_ht = $username_pos + 50 . ".00pt"; //Outputs the framed box echo "<img src='images/blue table.gif' style='position:absolute; left:140.00pt; top:$box_pos'; height:$box_ht'; width = 570.00pt; z-index:-1 class='cc01'>"; There is also code outputting the comment and username which seems to work just fine. The result is a pretty box framing the comment, but the outputted image always ends up with the same height, which obviously doesn't work because each comment in the DB can have a different number of lines and would need a different size box. Just to be clear, the source image is much larger than what can be produced by this code. If anyone has any suggestions, I'd really appreciate it. Thanks! For a college assignment I was required to make a website. It is after getting graded but I would like to continue to at least try to improve my site. One of the problems I had was the height of the sidebars. I solved the problem by using a javascript script, but I am wondering if it can be done with php? i am uploading image to s3 server and by php i am making a copy of that image on server , if i upload an image of 2.3 mb than the width of image is not coming but if i upload less size image like 26kb than it is showing the width of image so it is able to create the copy . here is my code of php : $s3 = new S3(awsAccessKey, awsSecretKey); $thumbId = uniqid(); $thumbId .= ".jpg"; $img = ''; if($imgType == "image/jpeg"){ $img = imagecreatefromjpeg($sourceUrl); }else if($imgType == "image/png"){ $img = imagecreatefrompng($sourceUrl); }else if($imgType == "image/gif"){ $img = imagecreatefromgif($sourceUrl); }else{ $img = imagejpeg($sourceUrl); } echo $width = imagesx( $img ); echo $height = imagesy( $img ); please tell me what is the problem with size of image.. regards rahul Hi Fellas, having a bit of a brain freeze here, i am trying to set a max width or height for a uploaded image, but my brain has frozen, maybe its the cold weather lol list($width,$height)=getimagesize($uploadedfile); $newwidth=250; $newheight=($height/$width)*$newwidth; $tmp=imagecreatetruecolor($newwidth,$newheight); basicly i want to find the biggest size of an image, beit width or height then set that size to 250... Any pointers here? Hi People. Thanks for all the help on here in the past, you have been brilliant. I run the airfield cards.com website and have a script in the output page that is as follows. Code: [Select] To Embed this Card into your website, cut and paste the following code: <input name="generate" value="<? echo "<iframe src='http://www.airfieldcards.com/php/courtesy_card.php?id=".$id. "' ></iframe>";?>"> Now the way it shows on the site is like this Code: [Select] <iframe src='http://www.airfieldcards.com/php/courtesy_card.php?id=165' ></iframe> So, I look at the iframe code from google that should be cut and pasted into a website (obviously it's working code from google) Code: [Select] <iframe width="700" height="1500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps/ms?msa=0&msid=203054009368331462137.0004aa731e7de2e86a0e0&ie=UTF8&t=h&vpsrc=0&ll=53.800651,-4.042969&spn=80.03397,61.435547&z=4&output=embed"></iframe><br /><small>View <a href="http://maps.google.co.uk/maps/ms?msa=0&msid=203054009368331462137.0004aa731e7de2e86a0e0&ie=UTF8&t=h&vpsrc=0&ll=53.800651,-4.042969&spn=80.03397,61.435547&z=4&source=embed" style="color:#0000FF;text-align:left">AirfieldCards.com</a> in a larger map</small> Now I have tried to take the code from the google iframe (width/height/scrolling/etc) and paste it into my source but it doesn't work. Here's how I have done it. Code: [Select] To Embed this Card into your website, cut and paste the following code: <input name="generate" value="<? echo "<iframe width="700" height="1500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src='http://www.airfieldcards.com/php/courtesy_card.php?id=".$id. "' ></iframe>";?>"> Can someone please modify my fist lot of code so that I have the correct height and width settings (700 x 1500) Thanks in advance Regards Vince Gledhill This topic has been moved to CSS Help. http://www.phpfreaks.com/forums/index.php?topic=349596.0 Hi folks, I'm using this code to display a picture that is uploaded in a form. Code: [Select] print "<img src='http://www.coast2kosci.com/mylongrun/test/photo_uploads/$imgx' width='300' height='300' alt='Your photo' />"; At first I tried specifying only the width, without the height. But for tall photos, the display wasn't really what I was after. Then I specified both width and height, which results in a mis-scaled photo. Is there any way that I can specify the height and width atributes as a sort of maximum / or limiter. Ie: If the height is greater than the width, limit the height to 300, and if the width is greater than the height, limit the width to 300? Thanks for your time, Dave Hey guys! I have the following php code that grabs variables (and the browsed image) from Flash. //FLASH VARIABLES $Name = $_POST['Name']; $itemNumber = $_POST['itemNumber']; $filename = $_FILES['Filedata']['name']; $filetmpname = $_FILES['Filedata']['tmp_name']; $fileType = $_FILES["Filedata"]["type"]; $fileSizeMB = ($_FILES["Filedata"]["size"] / 1024 / 1000); list($filename, $extension) = explode('.', basename($_FILES['Filedata']['name'])); $filename = $Name; $target = $filename . $itemNumber . "." . $extension; // Place file on server, into the images folder move_uploaded_file($_FILES['Filedata']['tmp_name'], "images/".$target); This works perfect, but what I want to change is the width and height of the uploaded image. Any ideas/suggestions on how this could be done? Thanks in advance!! Cheers! I have folder with 100's images, how to find Height and width as Excel sheet? Hey guys I have a small issue, i have an upload that resizes the image into thumbnail by max width and ratios the width based on that. Here is my code
What I am wanting to do is instead upload the image with a max height and ratio the width proportionally. What variables do I have to reverse? Okay, so here is the deal. Have a table which stores image as blob files. Now i want to read the image width and height directly from the blob field. Is this possible and if yes, how? Things i tried so far; list($size[0],$size[1],$type, $attr) = getimagesize('image.php?i=26ddd45b02859e836d13d4b9fde34281'); print_r($size); $img = 'image.php?i=26ddd45b02859e836d13d4b9fde34281'; echo imagesy($img); image.php grabs the image from DB and show's it with header("Content-type: image/jpg"); It works for just showing the images with the <img> tag. Any ideas of help would be great! Hello, I have a long list of webpage addresses like this which extends below the fold / the bottom of a user's screen: Webpage 1 Webpage 2 Webpage 3 Webpage 4 Webpage 5 Webpage 6 Webpage 7 Webpage 8 Webpage 9 Webpage 10 Webpage 11 etc... I want to take this long list of words and split them into columns so that the reader never has to scroll down. Please can you tell me the best way of going about this? (should I just design for a specific screen resolution? - if so which screen resolution should I design for?). Many thanks, Stu Hi Im working on a market place style website. the framework im using is called elgg. it uses an algoritm to find the right approximate width and height of an image thats being uploaded. but on my site, all heights and widths must be the same. this is difficult because some pictures have much greater width than height and some have much greater height. so whats the best algoritm to use to make an accurate thumbnail of all images uploaded? Thanks |
|||||||